We're making great progress as we're building out this project. Now, if you are curious, and you're wondering if it takes this long to build out every single website, the answer is no.

Part of the reason why this is taking us awhile is that we're not just building out the website, we're also learning all of the key HTML and CSS fundamentals as we go. So, listening and going through those explanations definitely takes longer.

The more times you do this you're going to be able to eventually simply run through and build these types of projects very quickly, especially when you get a lot of practice with using tools like Flexbox.

Those are gonna be some of the bread and butter items that are gonna help you understand exactly how to place items on the page, how to align them, and how to style them however you need. So, with all that being said let's keep on building this out.

As you can see here on the left-hand side we have a little bit different set up than we're working with right now.

Right now we have all of our items right next to each other.

That is the default HTML behavior, but what I'd like to do now is I'd like to start customizing this.

The very first thing we're gonna do is we're going to create a wrapper div for all of this content. So, just like we have a wrapper Flexbox container for the entire nav bar, we're now going to create a component that is going to wrap up our little phone icon, the phone number, and then the hours.

So, let's get started with that. Open up index.html and in this contact hours wrapper, let's create a wrapper for that, and I'm going to call it the left column because that's what it is. It's gonna be that left column.

index.html

<div class="navigation-wrapper">

    <div class="left-column">
        <i class="fas fa-phone-volume"></i>

        <div class="contact-hours-wrapper">
            555 555 5555
            10 AM - MIDNIGHT
        </div>
    </div>

let's just see what this looks like now.

Now you can see that it's changed the color because this is no longer highlighted and it's no longer in that contact hours wrappers, so it's not blue anymore. This is a little bit better except right now it's using the default HTML behavior, and instead, I'd like to use Flexbox.

This gets to a very important topic, which is that you can have flex items that also are flex containers because remember, this whole nav bar is a flex container.

This contact element here is a flex item, but we can make it a flex container, and then all of the elements inside can be aligned however we need to. Let's go and let's do that. I'm also gonna add another wrapper class for this icon.

index.html

<div class="navigation-wrapper">

    <div class="left-column">
        <div class="icon">
            <i class="fas fa-phone-volume"></i>
        </div>

        <div class="contact-hours-wrapper">
            555 555 5555
            10 AM - MIDNIGHT
        </div>
    </div>

I had one of my early mentors who helped me understand some best practices with HTML and CSS. What he told me was that he has never had a situation where he had too many divs, but he had plenty of situations where he didn't have enough.

Remember that when you add divs you're giving yourself the ability to have more granular control over the items. You can align them better. You can style them with more specificity. That's gonna give you just a lot more control as you build out your interfaces.

So, now that we have this left column let's actually turn this into a flex container. Let's go into styles.css. This is still under common nav styles, and also just to make sure that we are not confusing ourselves I'm gonna get rid of these placeholder color items.

styles.css

/* Common nav styles */
.left-column {
    display: flex;
    align-items: center;
}

Now if we hit save and hit refresh that is getting us a little bit closer.

That looks really good. The next step is going to be to give some styles to this icon.

styles.css

/* Common nav styles */
.icon {
    margin-right: 15px;
}

Now, this is going to take us into a very important topic which is Parent-Child Relationship Selectors. Now if that sounds very foreign and confusing do not worry. We're gonna go over a lot throughout this course.

We want to apply styles not only to the icon, we also want to apply styles to that little 'i' tag inside of it. What we can do with CSS is grab specific tags, Like so.

styles.css

/* Common nav styles */
.icon {
    margin-right: 15px;
}

.icon i {
    font-size: 2em;
}

Now, do not worry. We have not talked about this yet, so that's what we're gonna discuss this little EM. So far everything we have talked about has been in pixels. Pixels are what you use when you want to have a hard coded unit of measure.

We talked about this before, and we said pixels are kind of like inches or centimeters. They are a hard coded, definite type unit of measure. A EM and its sibling REM, what these are is they are more like percentages. So, if I said, 1em nothing would change here.

That 1em is going to give you just essentially 100%. What 2em is gonna do is it's gonna give you whatever double the normal size is there. So, we're gonna be able to control this font size, and this is gonna increase the size of the icon.

Now that we have that, our phone number and the hours are sitting right on top of each other, and that's not what we really want.

In the next guide what we're gonna do is we are going to learn how to use a very powerful tool called CSS Grid to be able to build a little grid here that is gonna help us align these items.