title: cant get my footer to stay in Row format on smaller screens
body: <p>on screen sizes smaller than 768px my footer-nav does not display as row but instead as column. I have looked and I do realize that my flexbox code will not be taken into account.. so therefore I'm stuck. Any help would be appreciated. Along with that I'm trying to find a way to transform my footer so that on screen sizes larger than 768px the footer will display more links on it. So far I have found no ways to do this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* -- Base Element Styles -- */
  
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: peachpuff;
    margin: 0;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  h1 {
    color: lightslategray;
  }
  
  h2 {
    color: lightslategray;
  }
  
  h3,
  a {
    color: lightslategrey;
  }
  
  a {
    text-decoration: none;
  }
  
  p {
    padding: 8px;
    padding-top: 15px;
    font-weight: 500;
  }
  
  .unit .p {
    font-weight: 500;
  }
  
  
  /* -- Base Layout Styles -- */
  
  .main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: lightsalmon;
    padding: 15px 15px 15px 15px;
  }
  
  main {
    margin-top: 3rem;
  }
  
  .name {
    font-size: 1.35em;
    text-align: center;
    margin: 0;
  }
  
  .intro-title {
    text-align: center;
    padding-top: 14px;
    padding-bottom: 8px;
  }
  
  .main-nav {
    margin-top: 5px;
  }
  
  .nav-link {
    text-align: center;
  }
  
  .main-nav a {
    text-align: center;
    line-height: 2em;
    padding: 15px 15px 15px 15px;
  }
  
  .nav-link {
    font-weight: 700;
  }
  
  .container {
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .container-2 {
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .logo {
    padding: 5px 5px 5px 5px;
  }
  
  .footer-list {
    text-align: center;
    padding: .5rem;
    margin: 1rem;
  }
  
  
  /* -- Layout Containers -- */
  
  h1 a {
    padding: 0px;
  }
  
  .intro-unit,
  .main-footer {
    text-align: center;
  }
  
  .intro-unit {
    color: lightslategray;
    background: wheat;
    padding: 9px 9px 9px 9px;
    margin-top: 175px;
  }
  
  .main-footer {
    color: floralwhite;
    background-color: lightsalmon;
    margin-top: 25px;
    padding: 14px 10px 11px 10px;
  }
  
  .container {
    padding-right: 1em;
    padding-left: 1em;
  }
  
  .container-2 {
    padding-right: 1em;
    padding-left: 1em;
  }
  
  .unit {
    padding: 10px 10px 10px 10px;
  }
  
  
  /* -- Media Queries -- */
  
  @media (min-width: 768px) {
    .container,
    .container-2 {
      width: 90%;
      margin: 0 auto;
    }
    .intro-unit {
      margin: 7rem auto;
    }
  }
  
  @media (min-width: 1024px) {
    .intro-unit,
    .container,
    .container-2 {
      width: 90%;
      max-width: 1150px;
    }
    .intro-unit {
      margin: 5rem auto;
    }
  }
  
  
  /* -- Flex Box -- */
  
  @media (min-width: 768px) {
    .main-header,
    .main-nav,
    .intro-unit,
    .container,
    .container-2,
    .main-footer,
    .footer-nav,
    .footer-list {
      display: flex;
    }
    .main-header {
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .intro-unit {
      flex-direction: row-reverse;
      justify-content: space-around;
    }
    .container,
    .container-2 {
      flex-direction: column;
      justify-content: space-around;
    }
    .main-footer {
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .footer-list,
    .footer-nav {
      flex-direction: row;
      justify-content: space-between;
    }
  }
  
  @media (min-width: 1024px) {
    .main-header {
      flex-direction: row;
      justify-content: space-between;
    }
    .main-nav {
      flex-direction: row;
    }
    .intro-unit {
      flex-direction: row-reverse;
    }
    .container,
    .container-2 {
      flex-direction: row;
      justify-content: space-around;
    }
    .footer-list {
      flex-direction: row;
      justify-content: space-between;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Responsive Webpage&lt;/title&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'&gt;
    &lt;link rel="stylesheet" href="css/styles.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="main-header"&gt;
      &lt;h1 class="name"&gt;&lt;a href="#"&gt;Cole Smith&lt;/a&gt;&lt;/h1&gt;
      &lt;ul class="main-nav"&gt;
        &lt;li class="nav-link"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-link"&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-link"&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;header class="intro-unit"&gt;
      &lt;img class="logo" src="img/profile-picture.svg" alt="profile picture"&gt;
      &lt;div class="intro-text"&gt;
        &lt;p&gt;Hi, my name is Cole Smith I am an aspiring front/backend Web Designer! I am currently learning web design through Treehouse Tech and this is one of my projects.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  
    &lt;div class="intro-title" id="portfolio"&gt;
      &lt;h1&gt;Portfolio&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;main class="container"&gt;
      &lt;div class="unit-1 unit"&gt;
        &lt;img src="img/marketing.svg" alt=" image representing a marketing page"&gt;
        &lt;h2&gt;Marketing Page&lt;/h2&gt;
        &lt;p&gt;This project shows the front page of a marketing website meant for specific business i'm interested in.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="unit-2 unit"&gt;
        &lt;img src="img/search-app.svg" alt="image representing a travel webpage design"&gt;
        &lt;h2&gt;Search Page&lt;/h2&gt;
        &lt;p&gt;This project searches through a specific database to find information that the user is trying to look up.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="unit-3 unit"&gt;
        &lt;img src="img/travel-app.svg" alt="image representing a favorite spot-styled webpage"&gt;
        &lt;h2&gt;travel app&lt;/h2&gt;
        &lt;p&gt;This project compares travel times based on different transportation methods and tells you the best one.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/main&gt;
    &lt;div class="container-2"&gt;
      &lt;div class="unit-4 unit"&gt;
        &lt;img src="img/fav-spot.svg" alt="image representing a photo gallery webpage"&gt;
        &lt;h2&gt;Map of Favorite Spots&lt;/h2&gt;
        &lt;p&gt;This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="unit-5 unit"&gt;
        &lt;img src="img/photo-gallery.svg" alt="image representing a calculator webpage"&gt;
        &lt;h2&gt;Photo Gallery&lt;/h2&gt;
        &lt;p&gt;This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="unit-6 unit"&gt;
        &lt;img src="img/calculator.svg" alt="Image representing calculator-styled page"&gt;
        &lt;h2&gt;Calculator&lt;/h2&gt;
        &lt;p&gt;Someone can enter the numbers they want and press the big blue button and get the result.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;footer class="main-footer"&gt;
      &lt;div class="footer-div"&gt;
        &lt;h3 class="footer-title"&gt;Contact&lt;/h3&gt;
        &lt;p id="contact"&gt;If you're interested in chatting or want more information about what i've been working on, i'd love to hear from you!&lt;/p&gt;
        &lt;p&gt;Phone: 1 (303) 4040&lt;/p&gt;
        &lt;p&gt;Email: cole.smith.code@gmail.com&lt;/p&gt;
        &lt;ul class="footer-list"&gt;
          &lt;li class="footer-nav"&gt;&lt;a href="#"&gt;Cole Smith&lt;/a&gt;&lt;/li&gt;
          &lt;li class="footer-nav"&gt;&lt;a href="#"&gt;Back To Top&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>