Question 393011 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0
    • If you use flex, you can remove float:left.
    • If you want the buttons to use all the space, you can use justify-content:space-between.
    • You can even remove the li style.
    body {
  margin: 0px;
  padding:0px;
}



.navBar ul {
  margin-top:0;
  list-style-type: none;
  background-color: hsl(0, 0%, 25%);
  display: flex;
  justify-content: space-between;
}

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

.navBar a:hover {
  background-color: hsl(0, 84%, 47%);
}
     <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search