When I reach the breakpoint 480px, the right padding that I set on body disappears

Question

I have some articles in my code which has a display of grid. I have set the padding of the body to padding: 0 1em; and the min-width of the following elements and classes to 450px;

can someone please tell me why the padding on the right disappears when I go lower than the breakpoint 480px???

Here is a screenshot of my page below breakpoint 480px:

Screenshot of my website:

Here is a snippet of my css:

body{
      padding: 0 1rem;
}

/* Media Queries */

.article-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, auto));
      column-gap: 30px;    
      row-gap: 50px;
}



/* Utilities */

nav,
.article-container,
article,
.jour-hero,
.about-hero{
      margin: 0 auto;
}

footer,
nav,
.jour-hero,
.about-hero,
.hero{
      min-width: 450px;
}


nav,
.jour-hero,
.about-hero,
.hero,
.article-container{
      max-width: 1600px;
}

Answer 1

It is because you are using min-width's in your CSS.

If your display only has a width of e.g. 300px, your elements (marked with min-width) will be bigger than your display.

Exactly the problem you are encountering.

Solution:

Get rid of all static px measure units in your CSS, which are used for your page layout, and use responsive measure units like % or even better the flex layout.

As addition and/or alternative you can implement media queries, which allow you to assign CSS only to devices with a width lower than 500px for example.

From dev to dev:

Some will hate me for that, some will love me for that:

It is a good practice to use this CSS and eliminate many Problems with it:

*{
    box-sizing: border-box;
}

This CSS code snippet sets the box-sizing property of all elements to border-box. This means that padding and border are included in the element's total width and height, rather than being added to the outside. It's a useful way to ensure consistent sizing in layouts.