[resolved] DIV mysteriously popping outside of parent element

1

Hi all!

I’m working on my Survey form project, and I cannot for the life of me understand why my “General information” and “Habits” fields are popping outside of their parent element on the right side when dragging the browser width to 992px and less (that’s where I have a media query).

Posting a screenshot too just to be clear. I’ve been looking at the code for hours now but I can’t figure it out–I have a feeling it’s something glaringly obvious so if someone can have a fresh look I’d really appreciate it.

Here is the link:
https://codepen.io/qvistsson/full/abvmxMx

My apologies if the CSS is felt to be a bit messy!

Many thanks!

Oscar

outsidediv
outsidediv1135×812 58.1 KB

2

Hey there! I recommend setting child properties into inherit if you want it to use the parent’s. Like so…

@media (max-width: 992px) {
  #top-left-container {
/*     width: 100%; */
    width: inherit;
  }
}

@media (max-width: 992px) {
  #top-right {
/*     width: 100%; */
    width: inherit;
  }
}

Lmk if you need more help! :smile:

3

Thank you so much @CaraLagumen! Inherit solved the issue and I’ll be sure to use that instead of 100% in the future :slight_smile:

4

I’m happy to help! :blush: