Try changing your browser size and see how your webpage redistributes itself to fit your contents and navigation section in a nice way.

So what happened? Well:

@media screen and (min-width: 30em) checks if media is a computer screen and it has a minimum width of 30 em’s. If both conditions are met, then:

body { display: table; caption-side: top; } treats the body contents as if it were a table, setting the caption-side to show on the top.

[role=”navigation”] { display: table-caption; } uses an attribute selector to set the tag marked with the navigation role as the table caption, thus sending it to the top of the page.

[role=”navigation”] ol { display: table-row; } sets the ol inside the tag marked with the navigation role to be treated as a table row, so in short, the ol will be displayed as a row.

Finally, [role=”navigation”] ol li { display: table-cell; padding: 0.5em; } instructs the browser to treat every li inside an ol inside a tag marked with the navigation role as a table cell. That is why the list items are displayed in a contiguous way. Just like cells in a table row.

And that’s it! When the first condition is not met (min-width: 30em) then the page shows as originally layed on the html. You can keep adding conditions depending on what you want to accomplish. You can find more conditions on the W3C webpage.