main {background: navajowhite; padding: 10px} section {max-width: 1000px; margin: 10px auto; padding: 0 20px;} nav ul {display: flex;} nav li {list-style: none; padding: 0 5px;} nav a {text-decoration: none; color: green; background: yellow; padding: 10px} nav a:hover {color: yellow; background: green;} h2 {color: silver;} span {color: red;} figure {max-width: 200px;} img {width: 100%;} <main> <section> <header> <h1>Heading 1</h1> <nav> <ul> <li> <a href=“#”> navigation </a> </li> </ul> </nav> </header> <article> <h2>Heading 2</h2> <p>Main <span>Content</span>. <figure> <img src="http://b.parsons.edu/~dejongo/12-fall/stuff/01-blocks.gif" alt="blocks"> <figcaption>picture description</figcaption> </figure> </article> <footer> <hr> <ul> <li><a href="https://validator.w3.org" target="_blank">Validate your code!</a> </ul> </footer> </section> </main>