Space below main-nav

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
  border:1px red solid;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.25em;
  margin:0;
}



.name,
.main-nav{
  text-align:center;
}


.name a,
.main-nav a {
    text-align: center;
  display:block;
  padding-top:15px;
  padding-bottom:15px;
}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

.main-nav a:hover {
    color: #093a58;
}

/* ---- Layout Containers ---- */
.container{
  width:95%;
  margin:0 auto;
  padding-top:1em;
}
  .main-header{
    width:100%;

  }

.banner {
    color: #fff;
    background: #3acec2;
  width:100%;
}

.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
  width:100%;
}

.banner,
.main-footer{
  text-align:center;
}

/* ---- Page Elements ---- */

.logo {
    width: 190px;
  display:block;
  margin:0 auto;
  padding-top:3em;

}

.headline{
  text-align:center;
}

.tagline{
  display:block;
  text-align:center;
  padding-bottom:3em;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

  .header-container{
    width:80%;
    margin:0 auto;

  }

  .name{
float:left
}

.name{
  float:left;
}

  .main-nav{
    float:right;


}


.main-nav li{
    display:inline-block;
    float:left;
    padding-left:20px;
    padding-right:20px;

  }

.container{
  width:80%;
}

  .primary,
  .secondary{
    float:left;
    width:50%;
    padding-left:1em;
    padding-right:1em;
  }

.main-footer{
  text-align:center;
}


    /* ---- Float clearfix ---- */

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

}

@media (min-width: 1200px) {
.container{
  width:90%;
}  

.secondary, .tertiary{
    width:25%;
}
.primary{
  width:50%;
  }

.col{
  float:left;
  padding-left:1em;
  padding-right:1em;
}
}