The numbers are in the wrong order, and the items do not fit on one line yet. Make it so that the elements are spread over several lines. Each line must contain the numbers in the correct order....

It’s easy to do side navigation with flexbox. It is enough to make a block with the nav class a flex container and distribute the elements in it with a bell....

Let’s decorate our navigation a little. Set the background of the .nav unit to the background color of #EPS8EF. Add 10px vertical padding and 15px horizontal padding for the .nav block...

For each link with the class nav-item, add a 15px margin below it add a padding of 5px. The background color should be #bac2d5 and the test color #232324. Also remove the underscore from the link (use the text-decoration property)....

The document already has a grid container with one single item. But this element is stretched to full screen. Make the item sit in the middle of the grid container, not stretch....

An item with class grid-container should become a grid container. All elements inside it should fit in three columns and four lines. Specify both columns and lines of automatic width and height....

With Grid, you can easily create a page structure. That’s what we’ll do. Let’s start by making the .page-layout element a grid container. Our page should have two columns: 50px and auto, one for navigation and one for page content....

Let’s work on the elements placement. The .grid-container block needs to be made a grid container. The grid must have three columns. The first is 20vw wide, the names of the lines are ‘start’ and ‘col-1-end’....

The .grid-item must start at the second line (‘line2’) and must go through two lines. It must also start at the vertical line ‘col-2-start’ and end at the line ‘col-2-end’...

We need to make a calendar for December. The markup itself is already done. Styles remain. An item with grid-container class should become a grid container. The calendar should have 7 columns, the width of each should be determined automatically....