What would be the best way to style a horizontal nav bar using CSS be? An example would help.

Navigations are usually different from other blocks on your website mainly because of the simple fact that they are the one constant on your website regardless of the page you are in.

Your main layout might change on different pages but the menu usually remains constant. It is also one of the most interacted elements of your website which means it has to be really well-taught across platforms and devices.

Consider the navigation as a unique independent block of your main layouts but it has to fit regardless of the layouts. That is why most navigations look the same because somehow they have become standardized.

To style, something like this website's navigation try and consider what are the main blocks of the navigation and then split it into inline blocks that also have to be flexible regardless of screen size.

For example, the logo usually is always present no matter what your screen is but the main menu on smaller devices goes in a dropdown menu activated by a button therefor maybe they should be split into different blocks for flexibility.

This website's menu for example without looking at the code :

• Is wrapped into a container as the same width as the main layout
• It has 2 main blocks; One on the left of ~75% of the respective container width and the other one containing the rest.
• The left main block also has 2 child blocks; The logo and the Menu aligned somehow to the left and split by an even spacing.
• Please note that the logo on the left is sticking to the maximum left therefor it has no spacing on that side so please consider to select the first child of the main side block and remove the left spacing ( either margin or padding, your choice ). All other elements from the respective block have the same spacing on the left or right ( even the small splitter ).
• The block on the right has the same rules but are aligned somehow to the right.

One simple way to align elements to a side is to have one main div with text-align:[left or right] and then child blocks can have a display:inline-block which will align them. Please read about display:inline-block option.

Example :

<div class="main-wrapper">

    <div class="nav-block"> <!-- THIS IS THE FIRST LEFT BLOCK -->

        <div class="logo">

            <img src"..." />

        </div>

        <div class="menu">

            <ul>
                <li>Techdegree
                <li>...
                <li> Support
            </ul>

       </div>

    </div>

    <div class="nav-block> <!-- THIS IS THE RIGHT BLOCK, Check CSS why they are named the -->

      <div class="menu">

            <ul>
                <li>Workspace
                <li>...
                <li> <img src"..." /> <!-- Here you should use an icon insteand of an image for the bell but that's another discussion -->
            </ul>

       </div>

</div>

<style>

.main-wrapper{
    width: 1150px;
    box-size: border-box; <!-- google this css option, good to know -->
    padding: 15px;
    background: grey;
}

.nav-block{
    display: inline-block;
    width: 75%;
    text-align: left;
}

.nav-block:last-child { 
    width: 24%;  
    text-align: right;
}

<!-- Check this selector out https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child and see why I did this. This is the reason why I don't have to use different classes for 2 elements placed independently, try using selectors -->

<!-- There is always a gap and 75% + 25% is not always 100%, please do not feel confused and google this and why is always happening and maybe find a solution yourself -->

.menu ul li,
.nav-block .logo { 
    padding: 0px 25px;
}

<!-- Personally, I never leave simple HTML tags without a parent CSS class unless the CSS options apply to all existing tags ( in this case ul ) across your DOM ( or HTML code, in case you don't know what the DOM is ) -->

<!-- I have also used the " .nav-block .logo " CSS class by telling the CSSROM ( google to know what it is ) to apply the same CSS options as the " .menu ul li " by a comma ( between them ) -->

.nav-block .logo, 
.nav-block:last-child .menu ul li:first-child {
    border-right: 2px solid white;
}

.nav-block .logo {
   padding-left: 0;  
}

<!-- Since the CSSROM is read from bottom to top ( like Arabic from right to left ) the bottom options overwrite the top ones therefor here I am overwriting the padding to stick it the left. I did the same thing with ".nav-block" -->

   .nav-block:last-child .menu ul li:last-child {
       padding-right: 0; <!-- Same thing here. -->
   }

</style>

Clearly, the menu has more items but I tried to include the main ones. It could've been done in different ways and even more simple, but for you to learn please try and google what these CSS selectors, options, and structure do.

Please try and read through my comments.

I hope I didn't miss anything, but trial and error is always the answer to learn so regardless... google every keyword you consider confusing.