Container width does not maintain 100% on smaller screens

Question

I'm trying to make a simple app landing page with a responsive UI, but I'm struggling a lot with chrome DevTools and understanding the behavior of each container's width. I have the width of each container and the parent element of each container set to 100%, but as you can see in the screenshot, the container stops taking up the full width of the screen as I size it down using the DevTools responsive mode.

I have not yet created any media queries to handle smaller screen sizes, but my understanding is that the container width should always take up the entire screen width provided the width is set to 100%.

Here is one of the containers in my HTML:

<section class="container container--1">
        <img
          src="../Resources/DeviceImages/Paired.png"
          alt="iPhone and Apple Watch display app."
          class="container--1__img"
        />
        <div class="store-link">
          <img
            src="../Resources/Logos/tennis_app-title.png"
            alt="Tennis-App-Title"
            class="store-link__title"
          />
          <a
            href="https://apps.apple.com/app/apple-store/id6451323049?pt=126504666&ct=landingPage&mt=8"
            class="store-link__link"
          >
            <img
              src="../Resources/Links/Download_On_The_App_Store.png"
              alt="App-Store-Link"
              class="store-link__img"
            />
          </a>
        </div>
      </section>

Here is my SCSS styles for the container and parent main element:

.main {
  width: 100%;
}

.container {
  height: 80rem;
  width: 100%;

  &--1 {
    background-color: $color-green-medium;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 11rem;

    &__img {
      height: 65rem;
      width: 55rem;
      object-fit: contain;
      padding: 3rem 0;
      animation: fade-in-from-bottom 0.8s backwards;
    }
  }
}

And here is the GitHub Link if it's more helpful to see the entire codebase.

I've been stuck on this for several days with no progress so any help would be massively appreciated. Thank you!

Answer 1

I checked your code, and I'd suggest you do some research on responsive design. You're using a lot of fixed widths on the images, and with your "justify-content: center;" attributes on the sections the content is disappearing off both sides since they're wider than the screen and are not scaling. Additionally, the width for the images with can cause some to push extra space off to the right (You can solve that last one by applying "contain" attributes to your sections). Some examples of responsive design strategies to take a look at include...

Using percentages/viewport measurements for width/height:

width: 50vw;
height: 100vw;

Min-width/max-width:

max-width: 100%;

Fit-content/min-content/max-content:

max-width: min-content;

@media screen width/height queries:

@media only screen and (max-width: 700px) {}

Contain attributes:

contain: content;
contain: layout;

And similar such uses. W3Schools (very underrated!) offers great tutorials on HTML & CSS (including responsive design!), as well as a "How To" section, which has lots of examples that might help you!