0

I read that percentage values calculate according to the nearest block container's width, so why are my li elements overflowing and how do I fix it so I can use the percentage values for responsiveness. 

*{
  margin:0;
  padding:0; 
  box-sizing:border-box; 
}
body{
  background-color:yellow;
  width:100%;
  height:100vh;
}

 li{
  margin: 0 10% 0 0;
  font-size:20px;
  color:black;
  font-weight:bold;
 }

 #logo{
  font-size: 40px;
  height:100%;
  display:flex;
  align-items:center;
 }

 .navigation{
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
 }

 #list-items{
  display:flex;
  list-style-type:none;
 }
 <nav class="navigation">
        
          <div id="logo">Ba-nna</div>
        <ul id="list-items">
            <li>Food</li>
            <li>Events</li>
            <li>About</li>
            <li>Fun</li>
            <li>Merch</li>
        </ul>
        
    </nav>

This code causes scroll bars to appear.

Note: If I use px it works ,but there has to be another way to create spacing.

To properly view code view, view it in another window in full browser screen.

I expected the li will form a space between themselves and also a space between the last li and the ul.

EE2021
  • 141
  • 12
user1357504
  • 9
  • 3
  • Check out this post: https://stackoverflow.com/questions/44357820/why-are-my-flex-items-wrapping-off-the-screen – EE2021 Jun 15 '23 at 19:22
  • ask your self a simple question: percentage of what? and you will see that percentage is not suitable here. Use px – Temani Afif Jun 15 '23 at 20:00

0 Answers0