Grey-lover Grey-lover - 3 months ago 13
HTML Question

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

Please have a look at this fiddle

HTML:

<nav id="main_nav">
<ul>
<li><a href="index.html">Blog</a></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

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><a href="index.html">Blog</a></li>
                    <li><a href="video_screencasts.html">Videos</a></li>
                    <li><a href="almanac.html">Almanac</a></li>
                    <li><a href="snippets.html">Snippets</a></li>
                    <li><a href="forums.html">Forums</a></li>
                    <li><a href="shop.html">Shop</a></li>
                    <li><a href="lodge.html">Lodge</a></li>
                    <li><a href="jobs.html">Jobs</a></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><a href="login.html">Log In</a></li>
                <li><a href="signup.html">Sign Up</a></li>
            </ul>
            -->
        </header>
	</div>