I can't figure out why my clearfix isnt working

I can't figure out why my clear fix isn't working. I have floated the nav ul with a class of main-nav to the right and the header collapsed a bit.

My clearfix is right above the footer styling in the CSS.

jsFiddle

.clearfix::after {
    content="";
    display: table;
    clear: both;
    }

Solution

Your code works just change content="" to content:""

.clearfix::after {
    content:"";
    display: table;
    clear: both;
    }

Snippet :

body {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.main-layout {
  min-height: calc(100vh - 20px);
}
header {
  background-color: orange;
  max-width: 100%;
  padding: 1px;
  margin: auto;
}
.main-title {
  padding: 3% 5% 0;
  margin: 0;
}
.main-nav {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.main-nav li {
  font-size: 1.5rem;
  list-style: none;
  position: relative;
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.sub-nav {
  width: 100%;
  background-color: white;
  position: absolute;
  z-index: 1;
  display: none;
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.sub-nav li {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.main-nav li:hover .sub-nav {
  display: block;
}
section {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
footer {
  height: 20px;
  max-width: 100%;
  padding: 0;
  margin: auto;
}
@media screen and (min-width: 450px) {
  .main-nav {
    margin: 0 5%;
    float: right;
  }
  .main-nav li {
    padding: 5px;
    float: left;
  }
}

<body>
  <div class="main-layout">
    <header class="clearfix">
      <h1 class="main-title">This Is a Test</h1> 
      <nav class="clearfix">
        <ul class="main-nav">
          <li><a href="index.html">Home</a>
          </li>
          <li>
            <span>Content1</span>
            <ul class="sub-nav">
              <li><a href="page1.html">Page 1</a>
              </li>
              <li><a href="page2.html">Page 2</a>
              </li>
              <li><a href="page3.html">Page 3</a>
              </li>
            </ul>
          </li>
          <li>
            <span>Content2</span>
            <ul class="sub-nav">
              <li><a href="page4.html">Page 4</a>
              </li>
              <li><a href="page5.html">Page 5</a>
              </li>
              <li><a href="page6.html">Page 6</a>
              </li>
            </ul>
          </li>
          <li>
            <span>Content3</span>
            <ul class="sub-nav">
              <li><a href="page7.html">Page 7</a>
              </li>
              <li><a href="page8.html">Page 8</a>
              </li>
              <li><a href="page9.html">Page 9</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
    <section>
    </section>
  </div>
  <footer>
    <span>Footer Content</span>
  </footer>
</body>