There is a .container :

 .container { box-sizing: border-box; margin-left: auto; margin-right: auto; padding-right: 8px; padding-left: 8px; }

And it does not quite correctly center: enter image description here On the 320px everything is fine, at 8px . But if you start to stretch, then the padding on the right starts to decrease gradually and then disappears altogether. What could be the problem? I am working on flexes, flexboxgrid2 is connected

 html { box-sizing: border-box; } *, *:after, *:before { box-sizing: inherit; } body { font-family: "Roboto", sans-serif; font-weight: 400; min-width: 302px; } h1, h2, h3, h4, h5, h6, p { font-weight: 400; } .container { width: 100%; } @media (min-width: 992px) { .container { width: 992px; } } /* Header */ .header { box-shadow: 0 0 16px 0 rgba(38, 38, 38, 0.16); } .header__nav { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; padding-bottom: 16px; } .location { display: none; } .header__buttons { display: flex; align-items: center; } .header__button { font-size: 11px; line-height: 13px; background: none; border-radius: 2px; } .header__button--sign-up { border: 1px solid #E0E0E0; color: #1d1d1d; padding: 14px 15px 13px 15px; /* margin-right: 12px; */ } .header__button--register { background-color: #262626; color: #fff; padding: 14px 15.5px 13px 15.5px; border: none; } .header__button--basket { display: none; } @media (min-width: 768px) { .header__button--basket { display: flex; width: 19px; height: 24px; background: url("../images/logo-basket.svg") no-repeat 50% 50%; border: none; } } 
 <header class="header" id="header"> <div class="container"> <div class="header__nav"> <div class="logo"> <img src="./images/logo.svg" width="92" height="11" alt="UberEats logo"> </div> <div class="location"> <form action="#" class="location__form"> <select name="time" id="" class="location__time"> <option value="ASAP">ASAP</option> </select> <p class="location__title">to</p> <input class="location__address" type="text" placeholder="ul. Bolshaya Dmitrovka, 22"> </form> </div> <div class="header__buttons"> <button class="header__button header__button--sign-up">Sign up</button> <button class="header__button header__button--register">Register</button> <button class="header__button header__button--basket"></button> </div> </div> </div> </header>

  • one
    It would be much easier to answer the question if you attached code in which such a problem arises. - Zdarova

1 answer 1

Found the error myself. After the header is a Maine tag, in which there are cards of goods. The product picture had a greater width than the parent. Accordingly, the issue is solved by setting the appropriate width. Thanks to all.