Header doesn't reach borders

Question

My header alway fails to reach the borders of my window, i've tried a plethora of solutions and even setting the margins to 0 does nothing

  .navbar{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  background-color:#d4d7de;
  width: 100%;

as you can see the header reaches the end on the far right but doesnt on the top and bottom. setting margins to 0 does nothing, setting the width to greater then 100% does nothing, setting the height just extends it down the page. I need it to be scaleble hence my use of percentage, but cant figure out how to get it to not leave that whitespace on the other sides.

https://codepen.io/Reda1000/pen/abOjJEr it looks like that should be it though. Removing body-margin.... at least. — David Renner, Mar 19 '20 at 23:38

Phy · Accepted Answer · 2020-03-19T23:38:21.863

3

Try setting this to your CSS:

* {
  padding: 0;
  margin: 0;
}

By default all elements may have some value set for padding or margin - this removes it for all (*).
This is called CSS reset as it "unstyles" all elements. There is also the process of providing "useful" styles which are equal in all browsers. That would be called normalizing.

edited Mar 19 '20 at 23:38

answered Mar 19 '20 at 23:35

Phy

248
1
8

This worked, ill accept it is an answer once the time delay expires. Question, why does this work, but setting the margin and padding for the element itself to zero not work? – ItsMeNaira Mar 19 '20 at 23:37
Because it actually is the `body` which has the margin you want to get rid of^^ – Phy Mar 19 '20 at 23:39

score 0 · Answer 2 · answered Mar 19 '20 at 23:34

0

Just do this:

body{margin:0px;}

answered Mar 19 '20 at 23:34

Etienne Bibaud

69
1
5

Header doesn't reach borders

2 Answers2