网格布局和UL奇怪边距

Question

我有一个带有display：grid的无序列表，每当我进入chrome devtools的移动视图时，网格变为列中的1项而不是5.直到这里一切都很好但我得到一些奇怪的左边距我没有在我的代码中任何地方定义，我不明白为什么它在这里..当我设置margin：0为ul它仍然存在..任何想法？

我的css＆amp; 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

内部媒体查询将left的{​​{1}} / right margin设置为.card以使其水平居中：

auto

我还建议使用基本的CSS浏览器重置，如下所示：

.card {
  margin: 5% auto;
}

Answer 2

因为你给了ul一个右边距：10px仅在小屏幕上，即480px，如果定义的话，它将从更大的屏幕获取其他边距。

@media screen and (max-width: 480px){
ul {
    width: 300px;
    margin:5% 0;
    grid-template-columns: 280px;
  }

或者如果你还想给予右边距：10px小屏幕而不是

@media screen and (max-width: 480px){
ul {
    width: 300px;
    margin:5% 10px 5% 0;
    grid-template-columns: 280px;
  }