.center{ display: block; margin-left: auto; margin-right: auto; width: 50%; } .row { display: flex; /*flex-wrap: wrap;*/ padding: 10px 20px; } /* Create two equal columns that sits next to each other */ .column { /*float: left;*/ flex: 25%; max-width: 25%; padding: 0 20px; align-items: right; } .row::after { content: ""; clear: both; display: table; .column img { margin-top: 8px; /* vertical-align: middle;*/ width: 100%; } .sabi-events-item{ margin-top: 5px; } .img-responsive{ margin-top: 10px; display: block; max-width:100%; height: auto; } .sabi-events-item img { margin-top: 10px; } article { display: block; } /* Responsive layout - makes a two column-layout instead of four columns */ /*@media screen and (max-width: 800px) { .column { flex: 50%; max-width: 50%; } }*/ /*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 { flex: 100%; max-width: 100%; } }*/