We also have a little bug here that I want to fix, and it's a perfect case study for how we can use margin. Now, do you see right here? Might be a little bit hard to see on your screen, but you see how there is a white border going around the entire div that we have here?

That's not what we want. We want our entire website to be flush. The reason for that border is because, by default, HTML wraps a margin around the body tag.

You can see this for yourself if you click on body here, and then you come down to where you see our little box model diagram. Do you notice how it has a margin of 8 on the top, right, bottom and left parts of the body?

That means that if you put all over kinds of elements here, you had all kinds of images and text and everything, you'd always have these 8px of margin right here. Well, we can get rid of that by overriding the value.

Let's switch back to the code here, and I'm going to come up to the very top. I'm just going to add a comment, and we'll call these "Common Styles" because these are styles that are going to be used for every page of the application.

The way that you can select the body because it's a tag, you can just say body, you don't have to have a class or anything like that for it. You can say:

styles.css

/* Common Styles */
body {
    margin: 0px;
}

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

Now if you hit save and come back, you can see that that has now overridden the value and now we don't have any margin here. That is the way it works.

Now, if part of that is still a little confusing or fuzzy, what I recommend is playing around with both values and seeing how they change. After this video's done, just don't go on to the next one.

If it's not clear, update the padding values, and watch how everything changes right here in the diagram. You can look at the body and see that now we have no margin. There's no margin going around it, but if you click on navigation wrapper, you can see how we have padding and no margin.

You can also even edit that, so you can click on navigation-wrapper. See what happens if you come down here and say, "okay, what happens if I have a margin of 30px". You can see how it is now wrapping 30px around every edge of that div.

Now that's not what we want, but the whole goal of this project and this course is for you to understand the way that HTML and CSS work. So, I definitely recommend for you to explore those.

This diagram right here is incredibly helpful. It gives you a really nice visual for being about to tell the difference between margin and padding.

The key one, being I think pretty clear right here, and that is, the margin is the space. It's the white space that goes around the outside of whatever element that you're working with. The padding is the white space inside of it. That is the main key difference.

Later on, we're going to talk about the border. The border is the little component that separates the margin and the padding, but we're not going to use a border on this element, so it's not needed.

After you're done, you can always either just hit refresh or click this little checkbox and it'll go away, and you'll be back to where we need to be.