Space between content and header not responsive?

As the size of the screen changes also the space between the sticky header and the content. I want it to remain always the same. What can I do?

You could shrink the space between the buttons or shrink the text at a set break point,

1 Like

Well the header grows in height as it runs out of horizontal space. Really at around 1050px you need to figure out what has to happen with the header as it no longer has the horizontal space it needs. Then you can also increase the top margin on the #content as needed.

One option if you don’t want to eye ball the top margin is to look at the header height and then calculate the top margin relative to the height.

As an example

BTW, imgur blocks Codepen you should use a different image host.


Thank you very much! One more question, in the options class the links don’t align to the center?even though text-align is set to center. Why?

You can add display: block; and text-align: center; to the links.

.options a {
    color: #A3750F;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    text-align: center;
1 Like