html - 网格布局和 UL 怪异边距

Question

我有一个带有显示的无序列表:网格，每当我在 chrome devtools 上转到移动 View 时，网格会更改为列中的 1 个元素而不是 5 个。直到这里一切都很好，但我得到一些奇怪的左边距，我没有在我的代码中的任何地方定义，我不明白为什么它在这里..当我为 ul 设置 margin:0 时它仍然存在..有什么想法吗？

我的 CSS 和 HTML:

ul {
  list-style: none;
  padding: 0;
  margin: 0 5%;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-gap: 10px;
  max-width: 100%;
}

.title2 {
  margin-right: 10px;
}

@media screen and (max-width: 480px) {
  ul {
    width: 300px;
    margin-right: 10px;
    grid-template-columns: 280px;
  }
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 90%;
  height: 320px;
  text-align: center;
  margin: 5% 0;
}
@media screen and (max-width: 480px) {
  .card {
    height: 265px;
  }
}

<div class="card">
  <div class="img-container">
    <img class="product-thumbnail" src="assets/products/{{product.image}}" alt="{{product.name}}" title="{{product.name}}">
  </div>
  <div class="container">
    <div class="title4 product-name"><strong>{{product.name}}</strong></div>
    <div class="product-price">{{product.price}} $</div>
    <p>
      <button class="btn-purchase" (click)="purchaseItem()">Purchase</button>
    </p>
  </div>
</div>

<div class="title2">Products:</div>
<ul>
  <li *ngFor="let product of products"><app-product [product]="product"></app-product></li>
</ul>

Answer 1

内部媒体查询将 .card 的 left/right margin 设置为 auto 水平居中:

.card {
  margin: 5% auto;
}

我还建议像这样使用基本的 CSS 浏览器重置:

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}