Struggling with my css

Dear people,

I am working on one of the projects but I’m struggling with the HTML / CSS and can’t find the problem.
Let’s say I have an outer div and an inner div.

Whenever I change the top-margin of the inner div, it is the outer div that moves downward.

Here’s the link to my codepen.
I am taling about the

and

I am sure I made an obvious mistake, but I just don’t see it…
Hope any of you guys wants to help me out. Thanks in advance :slight_smile:

I am assuming you are referring to “header” as the outer div and “header-content” as the inner div. I just tried using the padding-top of the outer div instead of the margin-top of the inner div and it created the effect I think you are looking for. So yeah, I would just use padding-top of the outer div instead.

Which div’s specifically

Set the overflow of the outer div to auto.

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

Thank you @Alanh168 and @nhavar,

seems like it works with the “overflow: auto”.
Thanks for posting the explanation along with your help.
This is really helping me to move on!

I want to ask a question about those button like home,about etc… How do you make a button and when you click into it , it shows into another webpage? Is it the input and the type element?

If you’re using a framework like bootstrap you can make a link look like a button just by adding the right class. Then you can leverage the natural behavior of anchors (links) without needing to involve JavaScript

<a href="http://somepage.here.com" class="btn btn-success">See the page</a>