Skip to main content
Practice

Styling div

Now, let's style the div elements inside the navigation bar.

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

We used the .navbar .container selector to style the div elements.


The properties set are as follows:

  • display: flex;: Used flex to align the inner elements horizontally.

  • align-items: center;: Center-aligned the inner elements vertically.

  • justify-content: space-between;: Distributed the inner elements evenly across the horizontal axis.

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

  • 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 width.

By doing this, the div elements are arranged horizontally within the navigation bar, centrally aligned vertically. Also, they are distributed evenly across the horizontal axis, creating space between the internal elements.

Thanks to the z-index property, the div element is stacked at the tenth layer within the navigation bar. It is drawn above any elements without a z-index or with a z-index less than 10, ensuring it is not obscured by other elements.

The height is set to 80px, and the width is set to occupy 100% of the screen, making it span the entire screen width.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.