I looked at apple.com and I saw the header spaced out exactly like what you have now.

But, to do what you're describing, you could try this:

#navList li {
  margin-left: 1em;
}
#navList li:first-child {
  margin: 0 auto 0 0;
}

Or, you could do something like this:

#navList li {
  flex: 1;
}
#navList li:first-child {
  flex: 5;
}

Addendum

This goes with your revised issue below:    

It looks like you lost some of the desktop settings when you created your mobile CSS, and everything unique for the destop needs to be inside a media query to work only when needed.

Here's a summary of the things I noticed:

• you turned off your logo in the mobile CSS and forgot to turn it back on for desktop
• you forgot to enclose your desktop settings in a media query (@media)
• you added some vertical mobile settings that must be overridden for horizontal
• you left out the justify-content setting you had in the previous version
• you forgot to use the margin settings that helped you last time

Here's a revised version of the desktop CSS file that addresses these issues (must be included last):

@media (min-width: 1024px) {            /* this section only for larger screens */

    /*------------------------ NAV -------------------------------*/
    #navList {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* this got left out from the original CSS */
        width: 95%;
        margin: auto;
    }

    #navList li {
        margin: 0;                      /* the mobile setting forces space to be divided */
        padding: 0;                     /* the mobile setting is not needed for desktop */
        width: auto;                    /* the mobile setting takes up an entire line */
        list-style: none;
        border-bottom: none;
        margin-left: 1em;               /* a little space between items */
    }

    #navList li:first-child {
        display: initial;               /* show the logo (hidden for mobile) */
        margin: 0 auto 0 0;             /* maximize space to menu */
    }

    nav {
        width: 100%;
        margin: auto;
        background-color: white;
    }
}

Guil Hernandez , I've gone through your flex tutorial a few times, but still can't get this. What am I doing wrong?

HTML:

 <nav>
    <div class="menuBar">
       <ol id="navList">
         <li><img id="menuLogo" src="img/fullLogo.png"></li>
         <li><a href="index.html">HOME</a></li>
         <li><a href="approach.html">APPROACH</a></li>
         <li><a href="services.html">SERVICES</a></li>
         <li><a href="portfolio.html">PORTFOLIO</a></li>
         <li><a href="meetUs.html">MEET US</a></li>
         <li><a href="blog.html">BLOG</a></li>
         <li><a href="contact.html">CONTACT</a></li>
       </ol>
    </div>
</nav>

Mobile CSS (1st):

/*------------------------ MENU -------------------------------*/
nav{
    display: flex;
    flex-direction: column;
    text-align: center;
}

#navList li{
    margin: auto;
    padding: 4%;
    font-size: 1.2em;
    border-bottom: 1px solid rgba(87, 87, 87, .3);
    width: 95%;
    list-style: none;
}

#navList li:first-child{
    display: none;
}

and desktop CSS:

/*------------------------ NAV -------------------------------*/     
#navList {
    display: flex;
    flex-direction: row;
    width: 95%;
    margin: auto;
}

#navList li {
  list-style: none;
  border-bottom: none;
}

nav {
  width: 100%;
  margin: auto;
  background-color: white;
}

When I code it this way, my logo doesn't show up at all, and when it does, it's not set left with the text menu set right. I was going for a horizontal menu like this on a desktop: http://scrapd.nl/old.html Thanks for any advice!

Steven Parker good call. I've loaded it in and linked it here (let me know if it works or not):

https://teamtreehouse.com/workspaces/17660772

Ah, I see. Very good! This should work then:

https://w.trhou.se/ovzlyh000r