<HTML>
<div class="items">
<div class="item">
<h4>Fast Shipping</h4>
<p>lorem ipsum</p>
</div>
<div class="item">
<h4>Good Service</h4>
<p>lorem ipsum</p>
</div>
<div class="item">
<h4>Free Coupons</h4>
<p>lorem ipsum</p>
</div>
<div class="item">
<h4>New Products</h4>
<p>lorem ipsum</p>
</div>
</div>
<CSS>
.items {
display: flex;
width: 80%;
}
.item {
width: 25%;
height: 100px;
padding: 50px;
text-align: center;
}
@media screen and (max-width:1200px) {
.item {
/* display: flex;
width: 700px;
flex-wrap: wrap; */
width: 50%;
}
}
@media screen and (max-width:768px) {
.item {
width: 100%;
}
}
위 코드는 왜 제대로 동작하지 않는건가요?
