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

Issue

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?

Solution

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.

Answered By - Sercan