Why is my navbar overflowing my page width?

September 19, 2022

I am trying to make a product landing page for freecodecamp, my navbar (the first thing I have to do) isn’t coming out well. What is wrong with my code?

Also I want to put a image behind the navbar.

It’s a bit frustrating coding, how do you learn with all these gimmicky little things going the wrong way? I find I have to have someone here to make sure the code is explained, but sincerely I don’t have that luxury.

<div class="nav-bar-wrapper">
       <nav id="nav-bar">
          <ul>
            <li><a class="nav-link" href="#">link1</a></li>
            <li><a class="nav-link" href="#">link2</a></li>
            <li><a class="nav-link" href="#">link3</a></li>
            <li><a class="nav-link" href="#">link4</a></li>
          </ul>
        </nav>
</div>


    html{
         width: 100%; 
         height: auto;
    }

    .nav-bar{
       width: 100%;
       height: 7vh;
       background-color: #555; 
    }
    #nav-bar a.active {
       background-color: #04AA6D; 
    }
    .nav-link{
       text-decoration: none;
       padding: 3px;
       display: inline-block;
       color: coral;
       width: 25%;
     }
    .ul, li{
       display:inline-block;
     } 
   ul{
       display: inline;
       text-align: center;
       padding:10px;
       border: 3px solid;
       font-size: 20px;
       text-align: justify;
    }
    li{
        margin: auto;
        display: inline;
    }
    .nav-link:hover{
         color: green;
    }

>Solution :

In place of your css, try this:

ul {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}

li {
    border: 3px solid;
    display: block;
    flex: 1 1 auto;
    list-style-type: none;
    text-align: center;
}