display, width, and height

Elements are block (start on a new line and stretch across: div, p, h1) or inline (flow within text: a, span, strong). display: inline-block flows inline but accepts width, height, and vertical padding, which plain inline elements ignore. display: none removes an element entirely.

width and height size a box; max-width caps it while letting it shrink, which is how text columns stay readable: max-width: 640px; margin: 0 auto; centers a column of that width.

.tag { display: inline-block; width: 100px; height: 40px; }
.content { max-width: 640px; margin: 0 auto; }

Your task

Make .swatch elements inline-block boxes 100px wide and 50px tall (they are empty, so the height must come from CSS). Make the links inside nav display: block so each sits on its own line. Give .content a max-width of 480px.

<!doctype html>
<html>
<head>
<style>
.swatch { background: rgb(47, 111, 237); display: inline-block; width: 100px; height: 50px; }
nav a { display: block; }
.content { max-width: 480px; }
</style>
</head>
<body>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>
<div class="content">
  <span class="swatch"></span>
  <span class="swatch"></span>
  <p>Some content in a limited column.</p>
</div>
</body>
</html>