Cakers Cakers - 7 months ago 11
HTML Question

Nav Links will not center on my page

The issue I am having is that no matter what I try I cannot seem to center my nav bar at all. I am pretty new to the HTML/CSS world and can't figure this one out. If you could take a look and see if you can think of how to center them that would be greatly appreciated!

Here is a picture of the issue:enter image description here

Part of my HTML CODE:








<title>Neon Angels</title>
</head>

<body class="fix">
<div id="wrapper">

<div class="section black" id="section1">
<h2 id="welcome">The Neon Angels Welcome You!
<img src="wingslogo.svg" alt="" id="top">
<img src="wingslogo.svg" alt="" id="top2">
</h2>
<p>
<img src="wings.jpg" alt="wings" width="750" id="wings">
</p>

<ul class="nav">
<li><a href="#section2" style="text-decoration:none">About Us</a></li>
<li><a href="#section3" style="text-decoration:none">Painting with Light</a></li>
<li><a href="#section4" style="text-decoration:none">Portraits</a></li>
<li><a href="#section5" style="text-decoration:none">Nature</a></li>
<li><a href="#section6" style="text-decoration:none">Contact Us</a></li>
</ul>

<div class="mouse">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</div>
</div>
</div>
</body>
</html>


CSS CODE:

.nav{
padding-left: 250px;
padding-right: 250px;
margin-left: 500px;
width: 1000px;
list-style: none;
}

.black ul li{
display:inline;
color:#aaa;
float:left;
}
.black ul li a{
padding:0px 10px;
color:#f0f0f0;
}
.black ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
}

#wrapper{
width: 100%;
margin: 0 auto;
}

Answer

Try making your .nav into this:

.nav {
  list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
} 

Here's a goofy demo: http://codepen.io/antibland/pen/MyZprK