그리드 레이아웃과 UL 기묘한 한계

Question

나는 모바일 devours에서 모바일보기로 갈 때마다 그리드가 정렬되지 않은 목록을 가지고있다. 그리드는 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

내부 미디어 설정 u 리 .card로의 left/right 은 수평으로 중앙에 :

.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; 
    }