Why is nav not aligning in the center of the header? - html

Question

Please have a look at this fiddle
HTML:
<nav id="main_nav">
<ul>
<li>Blog</li>
</ul>
</nav>
CSS:
#main_nav {
text-align:center;
width:50%;
padding-top: 35px;
}
Why is the nav not aligning in the center of the header

Answer 1

Don't give unwanted margin of padding to adjust your html
Here is a working Demo
removed padding-top margin etc and added:
header{
display: flex;
align-items: center;
overflow: scroll;
justify-content: center;
}
header h1{
min-width: 250px;
margin: 0;
}
#search_and_avatar{
flex: 1;
display: flex;
justify-content: flex-end;
}
body {
margin:0;
font-family: 'Source Sans Pro', sans-serif;
}
header {
background-color:#151515;
overflow:hidden;
height: 100px;
}
h1 {
color:#FFF;
font-family: "Arial Rounded MT", "Helvetica Rounded", Arial, sans-serif;
font-size: 40px;
font-weight: normal;
line-height:25px;
padding: 0px 20px;
}
header h1, img, #search_form {
float:left;
}
#main_nav a {
color:#FFF;
text-decoration:none;
}
#main_nav {
display: table;
text-align:center;
width:50%;
}
#main_nav ul {
display: table-row;
}
#main_nav ul li {
padding: 15px;
display: table-cell;
vertical-align: middle;
top: 50%;
display:inline;
}
header img {
width:35px;
}
header{
display: flex;
align-items: center;
overflow: scroll;
justify-content: center;
}
header h1{
flex: 1;
min-width: 250px;
margin: 0;
}
header form{
text-align: right;
}
#search_and_avatar{
flex: 1;
display: flex;
justify-content: flex-end;
}
<div id="wrapper">
<header>
<h1>CSS-Tricks</h1>
<nav id="main_nav">
<ul>
<li>Blog</li>
<li>Videos</li>
<li>Almanac</li>
<li>Snippets</li>
<li>Forums</li>
<li>Shop</li>
<li>Lodge</li>
<li>Jobs</li>
</ul>
</nav>
<div id="search_and_avatar">
<form action="index.html" method="post" id="search_form">
<input type="text" id="search" name="search">
</form>
<img src="images/avatar.png">
</div>
<!--
<ul id="account_nav">
<li>Log In</li>
<li>Sign Up</li>
</ul>
-->
</header>
</div>

Answer 2

#main_nav {
text-align:center;
width:50%;
padding-top: 35px;
margin:0px auto;
}

Answer 3

Remove display: table; and add margin: 0 auto; to your nav
#main_nav {
text-align: center;
width: 50%;
padding-top: 35px;
margin: 0 auto;
}
Check this Example fiddle