* { box-sizing: border-box; } /* Create two unequal columns that floats next to each other */ .column { float: left; padding: 10px; height: auto; } .row { margin: 0px 10% 0px 10%; align:center; } .left { width: 500px; text-align:left; padding: 5%; vertical-align: top; background-color: #dddd; } .right { width: 250px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; }