Problem z wyśrodkowaniem podpunktów w menu ( początkujący )

0

Witam programistów, mam problem z ułożeniem jeden obok drugiego 4 opcji menu. Pewnie jest to dość banalny problem ale głowię się nad tym już kilka godzin a chcę ruszyć dalej.

Dodaję również załącznik ze zdjęciem.

HTML

<body>
	<div class="wrapper">
	
		<div class="header">
			<div class="social">
				<div class="socialdivs">
					<div class="fb">
						<div class="icon-facebook"></div>
					</div>
					<div class="ig">
						<div class="icon-instagram"></div>
					</div>
					<div class="snapchat">
						<div class="icon-snapchat-ghost"></div>
						
					<div class="clear: both"></div>
					</div>       
				</div>
			</div>	
			
			<div class="logo"> <b><span style="color: #00FF00">Healthly</span></b><span style="color: #5f5f5f">Blog</span></div>
			
		</div>
		
		<div class="menu">
		
			<ol>
				<li> <a href="#"><b>Strona główna</b></a></li>
				<li> <a href="#"><b>Przepisy</b></a>
					<ul>
						<li><a href="#">Śniadanie</li>
						<li><a href="#">Lunch</li>
						<li><a href="#">Obiad</li>
						<li><a href="#">kolacja</li>
					</ul>				
				</li>
				<li> <a href="#"><b>O mnie</b></a></li>
				<li> <a href="#"><b>Kontakt</b></a></li>
			
			
			</ol>
	
		
		</div>

CSS

body
{
	width: 100%;
	background-image: url(restaurant_icons.png);
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	margin: 0 !important;
}
.wrapper
{
	width: 100%;
}
.header
{
	width: 100%;
	
	
}
.social
{
	width: 100%;
	background-color: #7e7e7e;
	margin-left: auto;
	margin-right: auto;
	height: 37px;
	border-bottom: 1px solid #363636;
	border-top: 1px solid #363636;
}
.socialdivs
{
	width: 150px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	text-align: center;
}
.fb
{
	width: 50px;
	float: left;
}
.fb:hover
{
	background-color:#3232CD;
}
.ig
{
	width: 50px;
	float: left;
	
}
.ig:hover
{
	background-color:#FF0000;
}
.snapchat
{
	width: 50px;
	float: left;
	
}
.snapchat:hover
{
	background-color:#D9D919;
}


.logo 
{
	width: 450px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 40px 0;
	font-size: 50px;
}
.menu
{
	width: 100%;
	background-color: #D8BFD8;
	padding: 10px 0;	
	border-bottom: 1px solid #DB70DB;
	border-top: 1px solid #DB70DB;
	text-align: center;
}

.content
{
	width: 1000px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	margin-bottom: 40px;
	
}
.footer
{
	width: 100%;
	background-color: #696969; 
	text-align: center;
	padding: 20px 0;
	border-bottom: 1px solid #262626;
	border-top: 1px solid #262626;
}

ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
}
ol a
{
	color: #323232;
	text-decoration: none;
	display: block;
}

ol > li
{
	width: 150px;
	height: 40px;
	float: left;
	border-right: 1px dashed #DB70DB;
}
	
ol > li:first-child
{
	border-left: 1px dashed #DB70DB;
}

ol > li:hover
{
	background-color: #cc99cc;
}

ol > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display:none;
	
}
ol > li:hover > ul
{
	display: block;
}

ol > li > ul > li
{
	background-color: #cc99cc;
	position: relative;
	z-index: 100;
	border-top: 1px dashed #DB70DB;
}

Jestem tu nowy i z góry dziękuję za pomoc :)

1

najprościej nauczyć się używania narzędzi wbudowanych w przeglądarki, wtedy klikasz prawym i wybierasz zbadaj element i masz dostęp do właściwości każdego elementu, możesz nawet zmieniać wartości i eksperymentować na żywca, bardzo ci się to przyda na przyszlość ;)

1

Tak na szybko:

ol {
    margin: auto;
    list-style-type: none;
    font-size: 18px;
    height: 35px;
    line-height: 200%;
    width: 610px;
}

Tak jak napisał @czysteskarpety, najlepiej korzystać przy tego typu problemach z narzędzi wbudowanych w przeglądarki.

0

Słyszałem właśnie że jest taka możliwość. Na pewno się tego nauczę.
Dzięki za pomoc, wszystko już działą :)

0

Albo zainstaluj sobie wtyczkę taką jak firebug

1 użytkowników online, w tym zalogowanych: 0, gości: 1