How can I make the child div to have the same width as the parent div?

Question

I have a parent div that has the max-width: 100% (full screen width) and I want to make the child div to have the same width, but I don't know why it's not working. I tried child div width: 100% and width: inherit but still it has a margin. Is there a solution? The parent div contains a carousel above this child div.
What I want to remove is this margin: the margin
For the child div I already used (you can see in the html below) bootstrap classes for margins, ms-0 and me-0; The parent div looks good, the margins are fine, has no margin from the browser.

I tried all the solutions offered here Cross browser method to fit a child div to its parent's width but it's not working.

.main {
  position         : relative;
  height           : auto;
  left             : 0px;
  right            : 0px;
  background-color : #eceaed;
  max-width        : 100%;
  }
.middle-box {
  position         : relative;
  height           : 250px;
  max-width        : 100%;
  border           : 1px solid black;
  background-color : rgba(96, 75, 254, 0.8);
  }
.middle-box::before {
  content          : "";
  background-image : url("../images/mountains2.jpg");
  background-size  : cover;
  position         : absolute;
  top              : 0px;
  right            : 0px;
  bottom           : 0px;
  left             : 0px;
  opacity          : 0.3;
  }

<div class="container main">
  <!--here is a div with a carousel-->

  <div class="container middle-box ms-0 me-0">
  </div>
</div>

Solution:

.main {
    padding   : 0;
}
.middle-box {
    max-width : 100%;
}
.middle-box::before {
    max-width : 100%;
}

Yoo forget to set `.main` `padding` to zero... ? – Mister Jojo Jul 24 '22 at 11:30 — Mister Jojo, Jul 24 '22 at 11:30

score 1 · Answer 1 · answered Jul 24 '22 at 11:33

If by the margin you mean the space outside the parent div (.container.main), then that may be caused by the browser's default styling. Browsers add some default CSS, including a margin on the body element.

If not, you may need to add padding: 0 to .main, or margin: 0 to .middle-box.

I tried tidying up the code a little and put some comments here as well. I hope it helps!

 body {
  margin: 0;
}

.main {
  /* <div> is block-level, so it will span the width of its parent (body) */
  /* position: relative is not needed here; only on the child */
  /* left: 0 and right: 0 are redundant */
  background-color: #eceaed;
}

.middle-box {
  /* <div> is block-level, so it will span the width of its parent (.main) */
  /* position: relative is not needed here; only on the child */
  position: relative;
  height: 250px;
  border: 1px solid black;
  background-color: rgba(96, 75, 254, 0.8);
}

.middle-box:before {
  content: "";
  background-image: url("../images/mountains2.jpg");
  background-size: cover;
  position: absolute;
  opacity: 0.3;
  /* inset: 0 gives the same result as top: 0, left: 0, right: 0, bottom: 0 */
  inset: 0;
}

   <div class="container main">
                <!--here is a div with a carousel-->
            
                <div class="container middle-box ms-0 me-0">    
                </div>
         </div>

The parent div is fine, has no margins, it looks good. The child div has bootstrap classes for margins ms-0 and me-0. — cris, Jul 24 '22 at 11:45

score 0 · Accepted Answer · answered Jul 24 '22 at 11:30

Your css for middle-box uses max-width, which allows the content to expand up to a certain maximum, but will shrink the width to fit the content until that maximum is reached. You want width: 100%; like you tried before.

If middle-box still doesn't reach the edges of the parent main element, then use the margin: 0; and padding: 0; as needed.

I recommend using the element selector in Chrome dev tools. You can select or mouse-over the .main and .middle-box elements and Chrome dev tools will display the margin and padding for each element. Then you know where your issue is coming from. Other browsers have similar functionality.

How can I make the child div to have the same width as the parent div?

2 Answers2