Let's switch back to the code, and let's also revert this back so align-items is back to center. I'm going to say align-items: center. Then as we've already discussed, we want to have some value, we want to have some empty white space here on the right and left-hand side as you can see this value that we have here.

Now, I did not want to use the space-around. It's mainly because I want to have exactly the type of look and feel what we have right here. If we had space-around, and we can actually change this just using the devtools. With navigation-wrapper, if I remove the padding, as you can see, that's going to change a lot of things.

Let's ignore that for right now. If I did space-around instead of space-between, you could see it kind of gets us where we want, but it's not perfect. It's not exactly what the designer originally intended.

Instead, what I would like to do is I'd like to have some hard-coded values for the left and right here, and then also on the top and bottom. That's what padding is going to allow us to do.

I'm going to get us back to where we want here, and now let's come back into the code, and let's see exactly what we need to do. I'm going to, at the very bottom here, I'm still in the navigation-wrapper style definition, and I'm going to say: padding.

styles.css

.navigation-wrapper {
    height: 190px;
    background-color: #11122b;
    color: #cbcbcb;
    /* Flexbox container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:
}

Now, there are a couple ways that you can declare padding. I'm going to show you a few different options, and then I'm going to explain which one that I personally like going with.

We could say something like padding: 100px. This is going to be kind of the sledgehammer. This is going to change the padding for the top, the bottom, the left, and the right. If I hit refresh now, you can see that this is way too much space.

This is giving us padding all over the place. What I'd like to do is become a little bit more granular with it. Another option is I could go, and let me comment this out, I could create a rule for each side. I could say:

styles.css

.navigation-wrapper {
    height: 190px;
    background-color: #11122b;
    color: #cbcbcb;
    /* Flexbox container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 100px; */
    padding-top: 60px;
    padding-bottom: 60px;
    padding-right: 100px;
    padding-left: 100px;
}

This is an approach that I will use from time to time, so if you hit refresh, you can see that that's giving us more the size that we're looking for.

We still have a few other options, so that gives us the ability to do everything all on one separate line, but you can also do it all together. I could say padding here, and then you could pass in either two or four arguments. I'm going to do four arguments at first.

It goes clockwise, so the way it works is I could say: the top is going to be 60px. Then the next one is going to be to the right, so that's going to be 100px. Next one's going to be on the bottom. That's 60. Then left.

styles.css

.navigation-wrapper {
    height: 190px;
    background-color: #11122b;
    color: #cbcbcb;
    /* Flexbox container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 100px 60px 100px;
    /* padding-top: 60px;
    padding-bottom: 60px;
    padding-right: 100px;
    padding-left: 100px; */
}

If you think of the way a clock looks, the way that you give these style values here work exactly the same way. You just start at the very top of the clock, then you go to the right where the three would be, then you go down to the bottom where the six would be, and then all the way around to the left where the nine would be, and that gives you all of those values.

If you hit Refresh, you can see nothing changes. This is giving us the exact same control as when we did it all on their own dedicated lines.

Now, if you ever run into a situation where you see this, where you want to have identical values for the top and bottom, and then identical values for the left and the right, there's even another short-hand syntax.

You can come here, and you can just use two values. What this will do is you'll say, the first one is going to work for the top and bottom, and the second one's going to be for left and right.

styles.css

.navigation-wrapper {
    height: 190px;
    background-color: #11122b;
    color: #cbcbcb;
    /* Flexbox container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 100px;
    /* padding-top: 60px;
    padding-bottom: 60px;
    padding-right: 100px;
    padding-left: 100px; */
}

If I hit save, hit refresh, you can see we have the exact same values. Now, this is going to be the best solution for this particular use case. Just because we are in a situation where we want to have top and bottom the same and then left and right the same.

That is what I'm going to go with, but I did want to show you all three options just so you're always familiar with that. Hit Refresh. Make sure everything is working.

Now, before we take a break and go on to the next video, I want to show you what padding represents. Thankfully, there is this very helpful little diagram here that's provided with the Google developer tools that shows what padding is.

Right here, you can see that if you hover over padding on the top there, it actually shows in that green box what the padding values are. It even says that right there we have 60 on the top and bottom and then 100 on the left and right.

Now, make sure, if you're not seeing this exact value, make sure that you either go in here in the elements and click on navigation-wrapper or just go and select the navigation-wrapper using the inspect tool.

What this does is this gives you what's called the box model in CSS. We haven't talked about all of these yet, so I'm not going to get into them yet, but I wanted to show you padding because this is very helpful.

Whenever you're building out some kind of interface and maybe the items are too far to the right or to the left, or they're just not lining up the way that you want, one of the best ways to debug that is to come down here to this box diagram and see what the values are.

There are plenty of times where I've done that, and then I've seen that "Oh, there's some padding value that needs to be set," or, "The border's throwing it off, or maybe the margin," which we'll talk about these later on.

That gives you the full box model. You have the core content, which, if you hover over it, this shows you all of the flex items, and then outside of that is where the padding lives. Then the border, which right now, there is no border, and then the margin. We haven't provided a margin or border, so that's why they don't have any values.

For right now, I think it really helps to visualize exactly what the padding represents and what it represents for every stage and around each side of the div. If you went through that, great job. You now know how to work with padding in CSS.