ul.horizontal-list { display: flex; margin-top: 0em; margin-left: -40px; flex-wrap: wrap; } ul.horizontal-list li { display: inline; margin-right: 1em; } ul.horizontal-list li a { text-decoration: none; font-weight: normal; } .card { padding: 1em; width: 11em; height: auto; text-align: center; font-size: 1em; align-items: center; margin-top: 0.8em; border-radius: 0.5em; } .card hr { margin: 0.5em 0; } .card .body { font-size: 0.8em; } /* Responsive cards - one colum layout on small screens */ @media screen and (max-width: 600px) { ul.horizontal-list li.card { width: 100%; display: block; margin-bottom: 1em; margin-left: 1em; } ul.horizontal-list li.card a, ul.horizontal-list li.card .header { font-size: 1em; } }