how can i get rid of white spacing between section tags?

I see a couple issues with the code.

First, the reason you are getting a white space at the top right above “Responsive layouts don’t have to be a struggle” is because of the navigation bars unordered list with the class name “row”.

An unordered list in most browsers (I think all browsers, but I am not sure so “most” will suffice) will have a default margin top and bottom of 1em.

To solve this first issue, simply add the following to your CSS:

.row {
  display: flex;
  margin-bottom: 0px; /*line to insert*/
}

Second, every h2 tag also contains a default margin of 0.83em on most browsers. So, removing this margin from the top, will get rid of the white space between divs, but because you still have margin implied on your p tags, there will be no shift in space between sections:

<h2 class="content_header">

Then in your css file, simply:

.content_header{
    margin-top: 0px;
}

Testing in your codepen, this will solve the issue of whitespace. Any more questions, please feel free to leave a comment, and I will edit or respond as necessary.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top