Items are going out of container even with using percentages in width?

user_14976945 0
Viewed 86

I have created a header with two items a site title and a navbar. And header is created by using the percentage units so the items would work according to the width of the screen but When I am decreasing the width of the screen the navbar is going out of the container even though by using percentages. I surfed the internet to find my answer and there are many similar questions on StackOverflow like that but no of them is working on my issue. So can anyone tell me why it's happening and how to fix this?

Here is my code

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    position:absolute;
}
/* html{
     border:5px solid blue;
} */
*,::before,::after{
 margin:0;
 padding:0;
 box-sizing: border-box;   
}
body{
    font-family:sans-serif ;
}
.container{
   width:100%;
}
.header{
    width:100%;
    padding:.5em .5em;
}
.header-wrapper{
    display:flex;
    align-items: center;
    justify-content:space-between;
    padding:.8em 0em;
    width:90%;
    margin:auto;
}
.site-title{
  margin-left: 2em;
  font-size:2.3em;
  font-weight:400;
    

}
.site-title-span{
    font-weight:750;
    color:#E47700;
}
.nav{
    margin-right:2%;
    width:45%;
    font: size 1em;;
}
.nav ul{
 display: flex;
 list-style: none;
 font-size:1.5em;
 justify-content: space-between;
}
.nav ul li{
  margin-right:12%;
}
.nav ul li a {
    text-decoration: none;
 color:black;
  font-weight: 500;
  padding:6px;
}
.nav ul li a:hover{
    color:white;
    background:#FEBD33;
    border-radius:50px;
    transition: .3s all ease;
}

.active{
    border-radius:50px;
    background-color: #FEBD33;
    color: white;
    padding:0 12px;
}
        <div class="header">
            <!--header open-->
            <div class="header-wrapper">
                <div class="site-title">
                    <p>

                        <span class="site-title-span">B</span>ee
                        <span class="site-title-span">B</span>uzz
                    </p>
                </div>

                <div class="nav">
                    <ul>
                        <li><a href="#" class="active">HOME</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">ABOUT</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--header closed-->

css html javascript
1 Answers

Your code currently sets a 45% width for the nav, and that's not enough for all .nav ul li which has its own content width plus that extra 12% margin-right. Also, nav ul has flex's default wrap value set to no-wrap and so the content will always exceed the header width as well as not wrapping at all.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  position: absolute;
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.container {
  width: 100%;
}

.header {
  width: 100%;
  padding: .5em .5em;
}

.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8em 0em;
  width: 90%;
  margin: auto;
}

.site-title {
  margin-left: 2em;
  font-size: 2.3em;
  font-weight: 400;


}

.site-title-span {
  font-weight: 750;
  color: #E47700;
}

.nav {
  margin-right: 2%;
  /* I don't think you need this, either remove it or give a bigger value, so you
  nav won't wrap even when there's enough space */
  /* width: 45%; */
  font: size 1em;
}

.nav ul {
  display: flex;
  list-style: none;
  font-size: 1.5em;
  justify-content: space-between;
  /* Add this line so the nav item can wrap when needed */
  flex-wrap: wrap;
}

.nav ul li {
  /* margin-right: 12%; */

  /* Use a smaller margin here */
  margin-right: 1rem
}

.nav ul li a {
  text-decoration: none;
  color: black;
  font-weight: 500;
  padding: 6px;
}

.nav ul li a:hover {
  color: white;
  background: #FEBD33;
  border-radius: 50px;
  transition: .3s all ease;
}

.active {
  border-radius: 50px;
  background-color: #FEBD33;
  color: white;
  padding: 0 12px;
}
<div class="header">
    <!--header open-->
    <div class="header-wrapper">
      <div class="site-title">
        <p>

          <span class="site-title-span">B</span>ee
          <span class="site-title-span">B</span>uzz
        </p>
      </div>

      <div class="nav">
        <ul>
          <li><a href="#" class="active">HOME</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">CONTACT</a></li>
          <li><a href="#">ABOUT</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!--header closed-->

user_17279480
Related