Centering a navigation bar CSS - html

Question

I have a nav bar at the top of each page on my site. Here are the HTML and CSS:
HTML
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Shifts</li>
<li>Part Five</li>
<li>Background</li>
</ul>
CSS
ul {
z-index: 100;
position: fixed;
list-style-type: none;
width: 80em;
height: 3em;
margin-left: auto;
margin-right: auto;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
width: 20em;
margin-right: auto;
margin-left: auto;
text-decoration: none;
overflow: hidden;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #87372c;
box-shadow: 0px 0px 50px #87372c;
color: #000000;
font-weight: 800;
text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}
I've also set up a CodePen here: https://codepen.io/njpbray/pen/Rerabv
The bar isn't centered at all and it has an extra hanging portion to the left that doesn't react to hovering.
I'm not sure what's going on here. I thought that making something of width 80em and settings left and right margins to auto would make it rest center. I also thought an 80em width bar with 4 subdivision of 20em would be equally divided, but there's that bit on the left.
I would prefer to keep the bar fixed at the top though if possible. Some pages are long, and I want the user to be able to access the nav bar anywhere on the page.

Answer 1

To centralise the links, remove the float: left from li and set it to display: inline-block. Then simply set text-align: center on the <ul>.
The above is enough to centralise the blocks, but your content is still offset to the right of the page. To correct this, significantly shrink your width values. em is based on the font size, which is a good policy for text, but a poor choice for width. You can use percentages for responsiveness, or alternatively go with a fixed px unit depending on how 'indented' you want the links to be. I've gone with 100px for the links in my example.
And as you're making use of a <ul> element, you'll also want to remove the default padding, by setting padding: 0 on ul. This removes the left 'offset' you're seeing.
Finally, don't forget to set margin: 0 on body to get rid of that 8px of whitespace around the edges.
This can all be seen in the following:
body {
margin: 0;
}
ul {
z-index: 100;
position: fixed;
list-style-type: none;
width: 100%;
height: 3em;
margin-left: auto;
margin-right: auto;
background-color: #333;
text-align: center;
padding: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
width: 100px;
margin-right: auto;
margin-left: auto;
text-decoration: none;
overflow: hidden;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #87372c;
box-shadow: 0px 0px 50px #87372c;
color: #000000;
font-weight: 800;
text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Shifts</li>
<li>Part Five</li>
<li>Background</li>
</ul>

Answer 2

You have the position set to fixed in your code. What you want is to set it to center.
ul {
z-index: 100;
position: center;
list-style-type: none;
width: 80em;
height: 3em;
margin-left: auto;
margin-right: auto;
background-color: #333;
}
https://codepen.io/anon/pen/dgGMva
I think you might be interested in going through the CSS tutorials at w3shcools. You will benefit immensely from this:
https://www.w3schools.com/Css/

Answer 3

The better way to handle what you want to achieve is to wrap you top bar in an element which take the entire width 100% of the browser with it position property set to fixed and add the list as a sub element.
And the space at the left of the first link it's due to the fact that by default the body tag have some margin and padding. You must remove it. the ul element have also same space padding and margin
html, body {
margin: 0;
padding: 0;
}
header {
width: 100%;
position: fixed;
background-color: blue;
}
ul {
z-index: 100;
list-style-type: none;
width: 80em;
height: 3em;
margin: 0 auto;
padding: 0;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
width: 20em;
margin-right: auto;
margin-left: auto;
text-decoration: none;
overflow: hidden;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #87372c;
box-shadow: 0px 0px 50px #87372c;
color: #000000;
font-weight: 800;
text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}
<header>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Shifts</li>
<li>Part Five</li>
<li>Background</li>
</ul>
</header>

Answer 4

It's better with css3 and display:flex instead of float:left and inline-block
<header>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Shifts</li>
<li>Part Five</li>
<li>Background</li>
</ul>
</header>
<main>
</main>
body {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: center;
}
ul {
background-color: #333;
display: flex;
list-style-image: none;
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
z-index: 100;
}
li a {
align-items: center;
color: white;
display: flex;
justify-content: center;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
width: 20em;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #87372c;
box-shadow: 0px 0px 50px #87372c;
color: #000000;
font-weight: 800;
text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}
main {
height: 1500px;
}
https://codepen.io/anon/pen/qJbZMv

Answer 5

As mentioned before: CSS3 and flex-box is supported by almost all relevant web-browsers. Use that instead. Here is a link for learning.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/