Header and Main width not reaching 100%

HTML-CSS
#1

Here’s the codepen link:
https://codepen.io/homtanks/pen/gNXXoQ?editors=1100
It’s still a work in progress, so please ignore all the borders and such.

If you take a look at the codepen you’ll see that the header and the main element don’t stretch to fill 100% of the page. There are about 8 pixels remaining on the left side that don’t get used. In previous challenges I’ve used a page wrapper and set the left margin to -8px, but I’d like to know why this is happening. The reason I brought it up this time is because I decided to just use the body as the wrapper, but if I set its left margin to -8px, then there are 8 pixels left over on the right side of the page. Here’s some relevant code:

html {
  font-size: 100%;
  font-family: helvetica, serif;
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: #EEF7FF; 
}

* {
  padding: 0;
  box-sizing: border-box;
}

main {    
  width: 100%;
  margin-top: 110px;  
  position: relative;
  border: 2px solid #0F2E3D;
}

h1, h2, h3 {
  text-align: center;
}

/******************HEADER***************************/
#header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 90px;
  background: #A2DDFA;
  z-index: 1;
}
#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

#3

By default, body tags have margins and paddings.

Give your body

margin:0;
padding:0;

Then it will remove 8px margin of your body.

#4

Dang, it really is just that easy huh? I guess that’s why I see this all the time. I just forgot to add the margin in.

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

Thank you!

1 Like
#5