Space between content and header not responsive?

HTML-CSS
#1

https://codepen.io/csobimudi/pen/EJBwNQ

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?

#2

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

1 Like
#3

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
https://codepen.io/anon/pen/LoGXqL

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

2 Likes
#4

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?

#5

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
#6