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

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;}