the color background is not applied to the block (html & css)

user_17835523 0
Viewed 68

There are several answers on StackOverflow, but the code structure of each is too different to directly understand.

My question is to know why the blue background does not take all the block? I still have white spaces.

my example

dashboard.html

<nav>
   <div class="sidebar-button">
      <div class="menu-container">
         <i class="bx bx-menu sidebarBtn"></i>
         <span class="dashboard">Dashboard</span>
      </div>
      <div class="menu-summary-container">
         <span class="user">Utilisateur : Toto </span>
      </div>
   </div>
</nav>

style.css

.home-section nav .sidebar-button {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
  width: 100%;
  background-color: #0a2558;
  color: #fff;
}

.menu-container {
  display: flex;
  align-items: center;
}

.menu-container i {
  font-size: 35px;
  margin-right: 10px;
}

.menu-summary-container {
  display: grid;
  margin: auto;
  text-align: center;
}

The code is available also on this following link.

I do not see what is missing?

css html
3 Answers

Assuming I've understood your question, you've applied the background-color to the .homesection nav .sidebar-button rather than .home-section nav.

I've adjusted your styles.css as below:

.home-section nav {
    display: flex;
    justify-content: space-between;
    height: 80px;
    background: #fff;
    align-items: center;
    position: fixed;
    width: calc(100% - 330px);
    left: 330px;
    z-index: 100;
    background-color: #0a2558;
    padding: 0px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
    }

Great first question by the way! Very well structured and the stackblitz is very useful!

user_156704570

The source of the problem is the align-items: center; and padding: 0 20px; styles defined in the .home-section nav section. The issue is resolved when the specified styles are removed.

enter image description here

user_150326880

The problem is that you are applying the color to a element that is inside the nav, not the whole nav. The element inside the nav is not taking up all the space. You can either change the color of the nav itself:

nav{
background: blue;
}

Or make the child fill up all the space in the nav:

.child{
height: 100%;
width: 100%;
}
user_143035600
Related