Why is my element with a set value for its margin-top being pushed upwards when I adjust the viewport width?

Im working on the product landing page project of the responsive web design course and my element with the id of title-box (line 87 of my css styles) is pushed upwards once you begin to shrink the viewport size, despite having a set margin top of 15% which I tried switching to rem and its still shrunk upwards the same. How do I keep my title-box element a set distance from the top of the viewport?

Hey there!
Try deleting your media query. That should keep it on the left side of the page.

No I want it to stretch across once it reaches a viewport size of 930 pixels, what I need help with is when you continue to shrink the viewport the title-box is pushed upwards and eventually touches the header. I want it to stay a set distance below the header no matter what the viewport width is, I can’t even figure out why changing the width is affecting the margin top, I would have thought that would only happen if I changed the height of the container and I don’t see how shrinking the page to a smaller viewport width would affect the containers height.

Change your title box media query to this:

#title-box {
    width: 100%;
    padding: 0;
    margin-top: 5em;
  }

Because you have the margin set to a percentage, it will always be based on the width of the parent container. By setting it to a fixed unit (em,rem,px), the margin won’t change when the view port changes.

That worked! Thanks for the help.