How do I get all the elements to align in the header?

1
2 
.main-links ul li {
   float:left;
  margin: 0px 30px 0px 30px;
}

add this code to your CSS.

Also, in the codepen environment, it isn’t necessary to declare the <!DOCTYPE> or include the <head>. codepen take care of that for you.

3

Use flexbox.

I’d highly suggest learning flexbox and not using floats.