How do I get rid of this unnecessary colored space on my website?

June 16, 2024

I am just starting out trying to learn how to make a website on my own using css, html, and the like-and as of the moment I am following a tutorial on youtube. In the code, I managed to figure out how everything works and all that, but the thing I am having trouble with is that I can’t seem to get rid of this unnecessary black space since I want to get rid of all those extended colors to the right of the nav bar words?

Issue I am describing


* {
    margin: 0;
    padding: 0px;
    
    
}

body{

    margin: 0px;


}


.navBar ul{

    list-style-type: none;
    background-color: hsl(0, 0% , 25%) ;
    padding: 0px;
    margin: 0px;
    overflow: hidden;

    display: flex;

    justify-content: flex-start;
    
    
}

.navBar a{

   color: white;
   text-decoration: none ;
   padding: 15px;
   display: block;
   text-align: center;
   
}

.navBar a:hover{

    background-color: hsl(0, 84%, 47%);
    
}

.navBar li{

    float: left;
    
}

This happened after I used:

background-color: background-color: hsl(0, 0% , 25%) ;

Here’s my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> China Goods </title>
    <link rel="stylesheet" href="/css/index.css">
</head>

<body>


    <nav class = "navBar"> 

        <ul> 

            <li> <a href = ""> Home </a> </li>
            <li> <a href = ""> Sign Up </a> </li>
            <li> <a href = ""> Shopping Cart </a> </li>
            <li> <a href = ""> Language </a> </li>

        </ul>

    </nav>
   

    <main> 



    </main>


    
</body>
</html>

I tried using margin:0 and padding:0 but that only got rid of the white space instead. Also attempted display: flex and justify-content: flex-start but that ended up doing the same thing as float: left. It moved the text to the left of the nav bar without ever getting rid of that extra space to the right. In the end, it didn’t get rid of the extra black colors to the right of the Language text.

>Solution :

add width: max-content; inside your .navbar ul

.navBar ul{

list-style-type: none;
background-color: hsl(0, 0% , 25%) ;
padding: 0px;
margin: 0px;
overflow: hidden;
width: max-content;
display: flex;
justify-content: flex-start;}

This makes the element end at the end of all the list elements, therefore the background will also end