Container Properties (justify-content, align-items, gap, flex-wrap)

The navigation bar from the previous lesson has a content area 1,240px wide, but its four links use only 421px of it, margins included. The other 819px is empty. That leftover length on the main axis is called the free space, and the properties in this lesson are set on the container to decide where the free space goes. justify-content shares it along the main axis, align-items positions items along the cross axis, and gap and flex-wrap control the spacing and the wrapping of the items.

All examples change the page from the previous lesson. Add each rule to its `<style>