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

Html – Width in CSS set to 100% but it only take 80%

I am trying to create header inside the header it has two box 1, 2. Inside box 1 it has two other box A1, A2. Don’t know why but I can not set the length container full length of screen even though I set the width for it is 100% it still take 85% screen.

enter image description here

.Header-Fixed {
  position: sticky;
  z-index: 998;
  background-color: #FFFFFF;
  outline-style: solid;
  padding: 4em;
  outline-color: #E5E0FF;
  outline-width: 0.5px;
  width: 100%;
}

.container {
  width: 100%;
  padding: 1em;
  outline-style: solid;
  outline-color: green;
  align-items: center;
}
<header>
  <div className='Header-Fixed'>
    <div className='container'>
    </div>
  </div>
</header>

Could you show me why this happens? I am beginner with Front End.

Tags:

2

Answers


  1. 0

    Try setting padding on the .container box instead of the .Header-Fixed box like this:

    .Header-Fixed{
    /* padding: 4em; /* remove this */
}
.container {
    padding: 5em; /* just use padding here */
}

    Also, if there is padding on any other parent elements (like <body>, etc.), that could be preventing it from taking up 100% of the screen width.

    Login or Signup to reply.
  2. 0 
    .Header-Fixed {
  position: sticky;
  z-index: 998;
  background-color: #FFFFFF;
  outline-style: solid;
  padding: 4em; /* Remove this */
  outline-color: #E5E0FF;
  outline-width: 0.5px;
  width: 100%;
}

.container {
  width: 100%;
  padding: 1em; /* Change this to "padding: 1em 0;" if you want to keep the vertical padding but make it take up 100% of the width" */
  outline-style: solid;
  outline-color: green;
  align-items: center;
}
html {
padding: 0; /*This will remove the weird spacing between the edges of your page and your content */
}
    <header>
  <div class='Header-Fixed'>
    <div class='container'>
    </div>
  </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search