Styling the div

Let's style the div element inside the navigation bar.

Copy
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  height: 80px;
  width: 100%;
}

We have styled the div element using the .navbar .container selector.

Here are the properties that have been set:

• display: flex;: Used flex to arrange the internal elements horizontally.

• align-items: center;: Centrally aligned the internal elements vertically.

• justify-content: space-between;: Distributed internal elements horizontally with space between them.

• z-index: 10;: Used the z-index property to position the div element at the top of the stack.

• height: 80px;: Set the height of the div element to 80px.

• width: 100%;: Set the width of the div element to 100% of the screen.

This configuration makes the div element align horizontally within the navigation bar and center vertically. Additionally, the internal elements are distributed horizontally with spaces between them.

The use of the z-index property ensures that the div element is stacked above others in the navigation bar with a value of 10. It will be drawn above elements without a z-index or those with a value less than 10, ensuring it is not obscured by other elements.

The height is set to 80px, and the width fills 100% of the screen, ensuring it spans the entire width horizontally.