<div class="container">
  <nav>
    <ul>
      <li><a href="#section-1">Section 1</a></li>
      <li><a href="#section-2">Section 2</a></li>
      <li><a href="#section-3">Section 3</a></li>
      <li><a href="#section-4">Section 4</a></li>
    </ul>
  </nav>
  <section id="section-1">
    <h1>Section 1</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis sed laboriosam cum quisquam unde consequuntur tenetur similique maiores obcaecati. Dignissimos, suscipit non perferendis doloremque tenetur aliquid ipsa! Minima, unde, eligendi.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, architecto, culpa, delectus magnam asperiores molestias atque impedit veniam soluta perferendis maxime deserunt quibusdam sequi totam fuga doloremque non perspiciatis ab?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque error optio autem architecto nostrum? Nobis in ducimus dignissimos provident ratione vel impedit? Rerum odit beatae accusantium debitis nisi non hic.
    </p>
  </section>
  <section id="section-2">
    <h1>Section 2</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, porro amet tenetur deserunt aliquid vitae reprehenderit nihil ea! Debitis, vel, minus adipisci labore pariatur sapiente similique illum alias dicta itaque.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, fugiat, architecto, veritatis quam laboriosam consectetur eius rem dicta dolore aspernatur deserunt magnam excepturi eaque culpa accusantium harum recusandae quaerat vel!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, iusto, at, aperiam tempora reprehenderit nesciunt repellendus amet ullam incidunt nemo praesentium consequatur blanditiis laborum. Modi reprehenderit et fugiat voluptatibus ab!
    </p>
  </section>
  <section id="section-3">
    <h1>Section 3</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, saepe, molestias, nisi voluptatum modi sit commodi pariatur recusandae aut veniam obcaecati quia quod laborum natus aspernatur atque repellendus porro ratione.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, nemo magnam vero ea eos porro laboriosam ad soluta nobis consectetur corporis est blanditiis at saepe officiis cupiditate assumenda eaque placeat!
    </p>
  </section>
  <section id="section-4">
    <h1>Section 4</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sed illo dolorem. Voluptate, tenetur quaerat perferendis velit magni neque cupiditate a minima dicta pariatur eveniet mollitia earum similique libero repellendus!
    </p>
  </section>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
}

a {
  color: deepPink;
}

ul {
  list-style: none;
  padding-left: 0;
}

nav {
  background-color: black;
  color: white;
  margin-bottom: 1em;
  padding: 1em;
}

section {
  padding: 1em;
  border: 1px solid #ddd;
  background-color: white;
  margin-bottom: 1em;
}