Let's look back at our navigation menu example and get familiar with some important terms before we move on to learn more CSS properties. Look at the markup. To create a flexbox, we need at least two elements, a parent and one or more immediate children. Here we have four child items. To place all these child items in a single row, we need to apply the rule display: flex to the parent and not to the items. All the CSS properties that we learn next will work only when you add the rule display: flex. The parent here is called the flex-container and all these items are called flex-items. We will use the terms container and items throughout this course, so remember them. In the previous episode, to add some space between these items, I used a horizontal padding on each li element. Let me inspect element and show you.

In the previous episode, to add some space between these items, I used a horizontal padding on each li element. Let me inspect element and show you. So, each li element has a padding. Setting a padding this way will also add some space at the beginning and ending of the menu like you just saw and this is not desirable. Instead, let's remove this padding and add a gap using the gap property on the parent container. Here the gap must be two times that of the padding because we are combining the left and right padding. Gap of 2.4rem and now you see we have the exact same result. And we don't have any unnecessary gaps at the beginning and end of the items. If needed, we can add some additional padding here to the container itself. Maybe change that to 2.4rem and now this makes more sense.