<header>
      <nav>
        <a href="#first">Section 1</a>
        <a href="#second">Section 2</a>
        <a href="#third">Section 3</a>
        <a href="#fourth">Section 4</a>
      </nav>
    </header>
    
    <div class="content-container">
      <div class="section-content" id="first">
        <h3>Section 1</h3>

        <div class="flex-container">
          <p class="flex-column">Hello world!</p>
          <p class="flex-column">Hello world!</p>
          <p class="flex-column">Hello world!</p>
          <p class="flex-column">Hello world!</p>
        </div>
      </div>

      <div class="section-content" id="second">
        <h3>Section 2</h3>
        
        <div class="flex-container">
          <p class="flex-column">Hello world!</p>
          <p class="flex-column">Hello world!</p>
          <p class="flex-column">Hello world!</p>
          <p class="flex-column">Hello world!</p>
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan elit eget scelerisque cursus. Nam mauris magna, lacinia id turpis a, vehicula ultrices purus. Nullam rutrum, sapien sollicitudin sagittis dapibus, odio quam molestie ligula, sit amet dapibus nisl risus at ligula. Nunc in sagittis nulla. Praesent vestibulum nec odio vitae pretium. Morbi ut viverra dui. Cras faucibus turpis eu massa fermentum, sed varius diam efficitur. Donec dictum consequat interdum. Morbi vitae euismod ligula.</p>
      </div>

      <div class="section-content" id="third">
        <h3>Section 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan elit eget scelerisque cursus. Nam mauris magna, lacinia id turpis a, vehicula ultrices purus. Nullam rutrum, sapien sollicitudin sagittis dapibus, odio quam molestie ligula, sit amet dapibus nisl risus at ligula. Nunc in sagittis nulla. Praesent vestibulum nec odio vitae pretium. Morbi ut viverra dui. Cras faucibus turpis eu massa fermentum, sed varius diam efficitur. Donec dictum consequat interdum. Morbi vitae euismod ligula.</p>
      </div>

      <div class="section-content" id="fourth">
        <h3>Section 4</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan elit eget scelerisque cursus. Nam mauris magna, lacinia id turpis a, vehicula ultrices purus. Nullam rutrum, sapien sollicitudin sagittis dapibus, odio quam molestie ligula, sit amet dapibus nisl risus at ligula. Nunc in sagittis nulla. Praesent vestibulum nec odio vitae pretium. Morbi ut viverra dui. Cras faucibus turpis eu massa fermentum, sed varius diam efficitur. Donec dictum consequat interdum. Morbi vitae euismod ligula.</p>
      </div>
    </div>
    
    <footer>
      <p>footer</p>
    </footer>

html, body {
      margin: 0px;
      padding: 0px;
    }

    header {
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.7);
    }

    nav {
      max-width: 700px;
      margin: 0 auto;
      padding: 4px;
    }

    nav a {
      color: white;
      padding: 2px;
    }

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

    .section-content {
      padding: 10px 0px;
    }

    .flex-container {
      display: flex;
      justify-content: space-around;
    }

    .flex-column {
      width: 150px;
      height: 150px;
      background-color: yellow;
      margin: 2.5px;
      display: inline-block;
    }

    footer {
      width: 100%;
      height: 880px;
      color: white;
      background-color: black;
    } 

    header, nav, .content-container, footer {
      min-width: 600px;
    }

$(document).ready(function(){
        $('a[href^="#"]').on('click', function (e) {
          e.preventDefault();

          var target = this.hash;
          var $target = $(target);

          $('html, body').animate({
            'scrollTop': $target.offset().top
          }, 1000, 'swing');
        });
      });