Why is my div not expanding in width 100%?

I am creating a sidebar menu composed by 3 divs, these 3 divs should expand in “width” 100% of the menu width but they don’t. I have checked to make sure that all tags/divs are closed and make sure that are all displayed as grid and put on each width 100% but still they don’t expand to 100% width of their container. Why is that and how to fix it?

Here is my code:

*,
html {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  color: #fff;
  font-family: pc_seniorregular;
  font-weight: 400;
}

.mobile,
.tablet,
.laptop {
  display: none;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #16202a;
  /* border: 5px solid blue; */
}

div,
menu,
header,
footer {
  border: dotted 2px yellow;
  display: grid;
  height: 100%;
  width: 100%;
}

.desktop {
  height: 100%;
  width: 100%;
  /* border: 5px solid greenyellow; */
}

.dash-desk-wrap {
  grid-template-columns: 1fr 4fr;
  height: 100%;
  width: 100%;
  /* border: 5px solid red; */
}


/* SIDEBAR */


/* SIDEBAR */


/* SIDEBAR */

.dash-desk-sidebar {
  display: grid;
  grid-template-rows: 0.7fr 7fr 1fr;
  height: 100%;
  width: 100%;
  border: 5px dotted blue;
}

.dash-desk-side-logo {
  border: 3px dotted beige;
}

.dash-desk-side-list {
  border: 3px dotted red;
}

.dash-desk-side-social {
  border: 3px dotted green;
}


/* MAIN */


/* MAIN */


/* MAIN */

.dash-desk-main-wrap {
  grid-template-rows: 0.5fr 1fr 4fr 0.5fr;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
  <title>Base Template</title>
</head>

<body>
  <div class="mobile">
    <h1>mobile</h1>
  </div>
  <div class="tablet">
    <h1>tablet</h1>
  </div>
  <div class="laptop">
    <h1>laptop</h1>
  </div>
  <div class="desktop">
    <div class="dash-desk-wrap">
      <!-- SIDEBAR -->
      <!-- SIDEBAR -->
      <!-- SIDEBAR -->
      <menu class="dash-desk-sidebar">
        <div class="dash-desk-side-logo">
          <p>Logo</p>
        </div>
        <div class="dash-desk-side-list">
          <p>Side</p>
        </div>
        <div class="dash-desk-side-social">
          <p>Social</p>
        </div>
      </menu>
      <!-- MAIN -->
      <!-- MAIN -->
      <!-- MAIN -->
      <div class="dash-desk-main-wrap">
        <header></header>
        <div></div>
        <div></div>
        <footer></footer>
      </div>
    </div>
  </div>
</body>

</html>

Answer

Either make the menu class as div

<div class="dash-desk-sidebar">
        <div class="dash-desk-side-logo">
          <p>Logo</p>
        </div>
        <div class="dash-desk-side-list">
          <p>Side</p>
        </div>
        <div class="dash-desk-side-social">
          <p>Social</p>
        </div>
</div>

or make a div below menu uwing the same.

Advertisement

Answer