Float alignment with JSP and CSS files - html

Question

I spent a bit of time creating a new navigation menu for a project. I used float elements in my CSS file which seems to play an important factor in keeping my navigation menu keep its appearance. But currently the alignment of the navigation menu is off and my goal is to have it centered in the view.
header {
background: #3d4144 url("../img/bg.png") 0 0 repeat;
border-bottom: 5px solid #ddd;
height: 170px;
padding-top: 15px;
}
#title {
color: white;
display: block;
letter-spacing: 2px;
margin-left: 50px;
padding: 20px;
position: relative;
text-align: left;
}
#headerMessage {
color: white;
display: block;
letter-spacing: 2px;
padding: 20px;
position: relative;
text-align: center;
}
.container {
margin: 0 auto;
width: 540px;
}
#navHeader {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
background: #464b4c;
background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
background-image: -o-linear-gradient(top, #464b4c, #3f4344);
background-image: linear-gradient(to bottom, #464b4c, #3f4344);
border-top: 1px solid #353939;
border-bottom: 1px solid #2e3131;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
height: 36px;
}
#navHeader a {
-webkit-transition: 0.1s ease-out;
-moz-transition: 0.1s ease-out;
-o-transition: 0.1s ease-out;
transition: 0.1s ease-out;
-webkit-transition-property: background-color, line-height;
-moz-transition-property: background-color, line-height;
-o-transition-property: background-color, line-height;
transition-property: background-color, line-height;
text-align: center;
}
#navHeader #navHeaderUL {
float: left;
border-left: 1px solid #353939;
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid #4d5354;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#navHeader li {
float: left;
}
#navHeader a {
display: block;
padding: 0 20px;
line-height: 36px;
color: #ddd;
text-decoration: none;
text-shadow: 0 -1px #2e3131;
border-left: 1px solid #4d5354;
border-left: 1px solid rgba(255, 255, 255, 0.06);
border-right: 1px solid #353939;
border-right: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
#navHeader a:hover {
background: #4d5354;
background: rgba(255, 255, 255, 0.05);
}
#navHeader li.active a,
#navHeader li.active a:hover,
#navHeader a:active {
padding: 0 21px;
line-height: 33px;
color: #eee;
background: #323637;
border-left: 0;
border-right: 0;
border-bottom: 3px solid #48a9c0;
background-image: -webkit-linear-gradient(top, #484e4f, #323637);
background-image: -moz-linear-gradient(top, #484e4f, #323637);
background-image: -o-linear-gradient(top, #484e4f, #323637);
background-image: linear-gradient(to bottom, #484e4f, #323637);
-webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
#navHeader li.green a,
#navHeader li.green a:active {
border-bottom-color: #56c93d;
}
#navHeader li.red a,
#navHeader li.red a:active {
border-bottom-color: #a54e49;
}
#navHeader li.purple a,
#navHeader li.purple a:active {
border-bottom-color: #c052b9;
}
#navHeader li.yellow a,
#navHeader li.yellow a:active {
border-bottom-color: #c0bb30;
}
<header>
<h1 id="title">Insert Title</h1>
<h2 id="headerMessage">INSERT MESSAGE!</h2>
<nav id="navHeader">
<div class="container">
<ul id="navHeaderUL">
<li class="active">Home
<li class="green">Schedule
<li class="red">Track
<li class="yellow">Contact
</ul>
</div>
<!-- end of container -->
</nav>
<!-- end of navHeader -->
</header>

Answer 1

You can remove line-height on #navHeader a which is causing the off vertical alignment (or is this intended?).
Remove float and set display: inline-block so you can horizontally center the ul with text-align: center.
Please find CSS tweaks commented below.
header {
background: #3d4144 url("../img/bg.png") 0 0 repeat;
border-bottom: 5px solid #ddd;
height: 170px;
padding-top: 15px;
}
#title {
color: white;
display: block;
letter-spacing: 2px;
margin-left: 50px;
padding: 20px;
position: relative;
text-align: left;
}
#headerMessage {
color: white;
display: block;
letter-spacing: 2px;
padding: 20px;
position: relative;
text-align: center;
}
.container {
margin: 0 auto;
width: 540px;
}
#navHeader {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
background: #464b4c;
background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
background-image: -o-linear-gradient(top, #464b4c, #3f4344);
background-image: linear-gradient(to bottom, #464b4c, #3f4344);
border-top: 1px solid #353939;
border-bottom: 1px solid #2e3131;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
height: 36px;
}
#navHeader a {
-webkit-transition: 0.1s ease-out;
-moz-transition: 0.1s ease-out;
-o-transition: 0.1s ease-out;
transition: 0.1s ease-out;
-webkit-transition-property: background-color, line-height;
-moz-transition-property: background-color, line-height;
-o-transition-property: background-color, line-height;
transition-property: background-color, line-height;
text-align: center;
}
#navHeader #navHeaderUL {
/* new */
text-align: center;
/*float: left;*/
border-left: 1px solid #353939;
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid #4d5354;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#navHeader li {
/* new*/
float: none;
display: inline-block;
}
#navHeader a {
display: block;
padding: 0 20px;
/*new*/
/*margin-top: -6px;*/
/*line-height: 36px;*/
color: #ddd;
text-decoration: none;
text-shadow: 0 -1px #2e3131;
border-left: 1px solid #4d5354;
border-left: 1px solid rgba(255, 255, 255, 0.06);
border-right: 1px solid #353939;
border-right: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
#navHeader a:hover {
background: #4d5354;
background: rgba(255, 255, 255, 0.05);
}
#navHeader li.active a,
#navHeader li.active a:hover,
#navHeader a:active {
padding: 0 21px;
/*new*/
margin-top: -6px;
/*line-height: 33px;*/
color: #eee;
background: #323637;
border-left: 0;
border-right: 0;
border-bottom: 3px solid #48a9c0;
background-image: -webkit-linear-gradient(top, #484e4f, #323637);
background-image: -moz-linear-gradient(top, #484e4f, #323637);
background-image: -o-linear-gradient(top, #484e4f, #323637);
background-image: linear-gradient(to bottom, #484e4f, #323637);
-webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
#navHeader li.green a,
#navHeader li.green a:active {
border-bottom-color: #56c93d;
}
#navHeader li.red a,
#navHeader li.red a:active {
border-bottom-color: #a54e49;
}
#navHeader li.purple a,
#navHeader li.purple a:active {
border-bottom-color: #c052b9;
}
#navHeader li.yellow a,
#navHeader li.yellow a:active {
border-bottom-color: #c0bb30;
}
<header>
<h1 id="title">Insert Title</h1>
<h2 id="headerMessage">INSERT MESSAGE!</h2>
<nav id="navHeader">
<div class="container">
<ul id="navHeaderUL">
<li class="active">Home
<li class="green">Schedule
<li class="red">Track
<li class="yellow">Contact
</ul>
</div>
<!-- end of container -->
</nav>
<!-- end of navHeader -->
</header>