Part of page without container

I'm doing challenge from fem: https://www.frontendmentor.io/challenges/equalizer-landing-page-7VJ4gp3DE?ref=challenge-roadmap

and thinking about layout of page. One tricky part is that one section on mobile is touching sides of screen. For tablet and desktop whole page have padding.
My approach is to wrap whole in container but I'm not sure how to solve this mobile tricky part.

One solution is to apply mobile only container and override main container.
.container {
  width: min(100% - 3rem, 69.375rem);
  margin-inline: auto;
}
@media screen and (max-width: 40rem) {
  .container--mobile {
    width: 100%;
  }
}


Is it good or can you suggest more robust solution to this?

https://solracss.github.io/fem-equalizer-landing-page/
obraz.png
Frontend Mentor
This challenge will be a perfect test of your HTML & CSS skills. If you're starting to get comfortable building smaller projects, this will be a great step up.
Frontend Mentor | Equalizer landing page coding challenge
Was this page helpful?