Home/ Questions/Q 8886105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T21:28:38+00:00

I have the following code for my nav bar and can’t seem to center

  • 0

I have the following code for my nav bar and can’t seem to center it on the website. What am I doing wrong? Removing float: left does nothing for positioning.
Thanks.

css

ul#list-nav {
    list-style: none;
    margin: 20px auto;
    padding: 0px;
    width: 800px;
}

ul#list-nav li {
    display: inline;
}

ul#list-nav li a {
    text-decoration: none;
    padding: 5px 0;
    width: 100px;
    float: left;
    background: #485e49;
    color: #eee;
    text-align: center;
    border-left: 1px solid #fff;
}

ul#list-nav li a:hover {
    background: #a2b3a1;
    color: #000
}

html

</head>
<body>
    <div id="as">
        <ul id="list-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It is already centered, it’s just that you are using explicit width for your menu so consider decreasing your menu width

    Demo

    CSS

    ul#list-nav {
  list-style:none;
  margin:20px auto;
  padding:0px;
  width:800px;
  border: 1px solid #ff0000;
  overflow: hidden;
}

    Currently I’ve made it 205px

    CSS

    ul#list-nav {
  list-style:none;
  margin:20px auto;
  padding:0px;
  width:205px;
  border: 1px solid #ff0000;
  overflow: hidden;
}

    Fixed demo

    • 0