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.
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.
That worked great! Thanks! And I am excited to learn about the flexbox layout next…
Any idea how to adjust the space above that H1-Headings text?
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:
That resets all default margins/paddings.
Thank you so much for all of your help! These forums are a lifesaver when it comes to CSS.