In the script above, we applied styles to the div tags that enclose the entire page as the container, the header with the header content, the main section where the main topic is displayed, and the footer that contains the message at the bottom of the page.

What is shown in Exercises 8.1.1 and 8.1.2 above is the common styling practice found in the structure of web page design.
A container that encloses the body with the article title, the main content, and the final notes or messages at the bottom of the page. In this container we define the margins, and the font sizes are left to be declared individually as needed in each section inside the container.

This type of container automatically adapts to different screen sizes, making the layout more responsive.

These styles help in creating complex layouts with rows and columns. Precision: Allows precise alignment of elements. Responsiveness: Makes it easier to create responsive designs that adapt to different screen sizes.

Flexbox Container: The .navbar class uses display: flex; to create a horizontal navigation bar.
Space Distribution: justify-content: space-around; distributes the elements evenly.
Alignment: align-items: center; centers the elements vertically.
Responsiveness: With a media query, the direction changes to flex-direction: column; on small screens, making the elements stack vertically.

display: grid; is used to create a grid layout.
Column Definition: grid-template-columns: repeat(3, 1fr); creates three columns of equal width.
Spacing: grid-gap: 10px; adds space between elements.
Responsiveness: With media queries, the number of columns adjusts to two on medium screens and one on small screens.