добавить отступ для оболочки в CSS Сетка вызывает горизонтальную прокрутку

Question

Я бы добавил дополнение к родительскому элементу div, чтобы моя внутренняя карта не придерживалась ограничений экрана, вот что я сделал

<div class="padding">
  <div class="wrapper">
    <div class="card">
      <app-character-card></app-character-card>
    </div>
    <div class="card">
      <app-character-card></app-character-card>    
    </div>
    <div class="card">
        <app-character-card></app-character-card>    
    </div>
  </div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);

}
.padding {

    margin: 10px;

}
.card {

width:100%;
height:100px;
background-color:red;
}

<div class="padding">
  <div class="wrapper">
    <div class="card">
      <app-character-card></app-character-card>
    </div>
    <div class="card">
      <app-character-card></app-character-card>    
    </div>
    <div class="card">
        <app-character-card></app-character-card>    
    </div>
  </div>
</div>

Заполнение вызывает у меня горизонтальную прокрутку (ширина 100% + заполнение, я полагаю)

Как определить внутреннее заполнение без прокрутки?

Обновление

Я обновил свой класс до отступов, теперь я получаю отступы не по центру

Answer 1

Ваш код выше, кажется, работает отлично.Вы должны будете предоставить больше информации, чтобы отследить ошибку.Но то, что должно работать почти во всех случаях, подобных вашему, - это указание CSS для элементов html & body следующим образом:

body, html{ max-width: 100%; }

Я надеюсь, что этоработает.

Но если этого не произойдет, предоставьте немного больше информации, как в коде, или что-то в этом роде, чтобы облегчить поиск обходного пути.

Answer 2

На этом скриншоте из Chrome Developer Tools вы можете увидеть влияние различных значений. Свойство margin используется для добавления пробелов вне элемента, но в вашем случае вы хотите использовать padding, чтобы добавить его внутрь.

.container {
    padding: 10px;
}