Cakers Cakers - 2 years ago 93
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>

<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">
<img src="wings.jpg" alt="wings" width="750" id="wings">

<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>

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


padding-left: 250px;
padding-right: 250px;
margin-left: 500px;
width: 1000px;
list-style: none;

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

width: 100%;
margin: 0 auto;

Answer Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download