Your thoughts on equal spacing above and below container? Pic included.

If you identify what spacing is causing the undesired layout, you could use specific selectors to alter the padding or margins.

For example, if your h3 has both a bottom and top margin that's resulting in too much white-space at the top of a container, you could target just the first one and remove the margin.

h3 {
  margin: 1.5rem 2.5%;
}

.container h3:first-child {
  margin: 0 2.5% 1.5rem 2.5%;
}

That's usually how I deal with similar unintended white-space in layouts, but I'm sure there are other techniques as well. Happy coding!

Edit: I've also found that a baseline css file can help when trying to confirm consistent spacing.

Hey Joe, I recommend you to use a reset style sheet, you can find it on google. Or you can also set your margin, padding and box-sizing to border box manually.

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

That way the elements does not have margins set by default and you can specify them yourself. I normally do that and then add a padding to the container element, if I have an h1 and I want to have the same spacing under it, I set the margin-bottom to the same padding of the container element.

For example:

.container {
   padding: 25px;
}

h1 {
   margin-bottom: 25px;
}

Hi Jesus,

I use normalize.

Either way, I may want margins on my headlines in general. I'm more curious about mobile views where it can more obvious there is uneven spacing above and below.

I sometimes feel myself hacking around to get it right, I feel there must be a better way.

Cheers.