I've tried everything, but I just can't seem to center my navigation bar properly. I'm new to HTML/CSS and struggling with this issue. If you have any suggestions on how to fix it, I would really appreciate your help!
Check out the image of the problem https://i.sstatic.net/AYzxz.jpg
Snippet from 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;
}