CODEWITHSUNDEEP
htmlcss
J_Davis
J_Davis

Reputation: 3

how can i eliminate whitespace between navbar and main background div?

hoping you can help. It's been a long time since I've coded without frameworks and such so I am purposely using vanilla html and css as a refresher.

I have begun building a quick website prototype, and I cannot for the life of me figure out why there is whitespace underneath the navbar element and my background section, despite creating css rules specifically for a full viewport background. I want the background section to start directly after the navbar.

Note: In testing, it appears the styling issue is tied to the html and body element rules. I could set the color to match with my background section, but somehow I feel that might cause other problems later..or at least it feels like cheating. Is there another possible solution? Most importantly, WHY is this happening given the css rules I have set? Everything appears to be in order, and inspecting elements has not helped, unless I have overlooked something important.

I can get everything else functioning fine, but I prefer to build in chunks, so the example below will look messy.

Apologies for any sloppiness in my coding. I am primarily a graphic designer.

html, body {
  margin:0px;
  padding:0px;
  border:0px;
  background-color:white;
}

Full Codepen here:http://codepen.io/J_Davis/pen/RGLVPv

Thanks!

Upvotes: 0

Views: 35

Answers (2)

Horlarme
Horlarme

Reputation: 26

You can also set the margin-top of class bigBG to -20px; like this:

.bigBG {
  background:#FF5733;
  min-height:100vh;
  margin-top:-20px;
  padding:0px;
}

Happy coding!

Upvotes: 1

Facundo La Rocca
Facundo La Rocca

Reputation: 3866

Add to your wrapper this props:

display: flex;
flex-direction: column;

It should look like this:

#wrapper {
  display: flex;
  flex-direction: column;
  margin:0px;
  padding:0px;
  border:0px;
}

Here you have it working

Happy new year!!!

Upvotes: 1

Related Questions