グリッドレイアウトとUL変わったマージン

Question

私はchrome devtoolsのモバイルビューに移動するたびに、並べ替えられていないリストをグリッドで表示しています。グリッドは5つではなく1つのアイテムになります。私のコードのどこにも定義されていない奇妙な左マージンと私はなぜそれがここにあるのか理解していません。私はマージンを設定します：ulは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/rightmargin

.card { 
    margin: 5% auto; 
} 

私はまた、このような基本的なCSSブラウザのリセットを使用することをお勧めします：

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

Answer 2

あなたは余裕右UL与えているので：10pxの唯一の小さな画面上で水平に中央につまり、480pxは、定義されている場合、より大きな画面から他のマージンを取ることになります。

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

か、また、マージン右を与えたい場合は：あなたはそれを0に `` body`s margin`をresettedいる

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