HTML reset copy

<div class="x-container x-card x-black x-round x-margin"> <div class="row"> <div class="column"> <div class="card"> <p>Card 1</p> <p>enter text</p> </div> </div> <div class="column"> <div class="card"> <p>Card 2</p> <p>enter text</p> </div> </div> <div class="column"> <div class="card"> <p>Card 3</p> <p>enter text</p> </div> </div> <div class="column"> <div class="card"> <p>Card 4</p> <p>enter text</p> </div> </div> </div>

CSS reset copy

.column { float: left; width: 20%; padding: 0 10px; color:#fff; } .row {margin: 0 -5px;} .row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .column { width: 100%; display: block; margin-bottom: 20px; } } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: red; }