Why is the positioning different on two divs with the same classes?

Also, on a side note: No matter what I do, I cannot seem to remove the whitespace above certain text. I’ve tried messing with line-height, margin, padding…is there some property I am missing?

Code can be found here: https://codepen.io/jenergy/pen/OJQEWQo/6958de5127912a7ade34a440a7b5b50d

That’s a quirk when you use display: inline-block for displaying elements on one line.
Adding
vertical-align: top;
to ‘.text-styles-container’ should fix the issue.

As a tip: for such elements a flexbox layout would be more fit. I would use inline-block rather for a list of simple elements, not layouts.

1 Like

That worked great! Thanks! And I am excited to learn about the flexbox layout next… :slight_smile:
Any idea how to adjust the space above that H1-Headings text?

1 Like

That will either be a padding of the .text-styles-container or a margin/padding of h1 – which is actually a h3 element.
All those elements have default margins. You often see reset files containing this:

* {
margin: 0;
padding: 0;
}

That resets all default margins/paddings.

1 Like

Thank you so much for all of your help! These forums are a lifesaver when it comes to CSS. :slight_smile:

1 Like