How can I align right and left of 2 divs

Question

I'm using materializecss to create a sample page, the problem is that I can't get 2 divs to alaign by the left and right padding, in a sort of way I want to expand the second div, to exactly match the first.

I have 2 divs, 1 containing an image:

<div class="section">
   <div class="container">
      <div class="maskbanner">
      </div>
   </div>
</div>

css:

.maskbanner{
     background: url('https://via.placeholder.com/1031x302') no-repeat;
     background-size: contain;
     background-repeat: no-repeat;
     height: 0;
     padding-top: 30%;
}

and after that I have a div containing a row and a col:

<div class="section">
   <div class="container">
      <div class="row">
    .. elements ..
   </div>
 </div>
</div>

The problem is that the class:

.row .col {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 .75rem;
    min-height: 1px;
}

adds .75 em to the left and right of the column, I tried to give that "extra" padding to my first div trying to match that padding, but it doesn't seem to work, I also want to keep that align responsive.

Here is my project:

CodePen

Answer 1

You need to structure your html, css according to their rule. Inside container should have row and inside row should have col. So all the element inside will have the same padding, margin and it will align correctly.

<div class="section">
   <div class="container">
      <div class="row">
        <div class="col">
          <div class="maskbanner">
          </div>
        </div>
      </div>
   </div>
</div>

In case you don't want to do that, create another css class like

.row.custom-row { 
   margin-left: -0.75rem;
   margin-right: -0.75rem;
}

and add it to the row of 2nd div

<div class="section">
   <div class="container">
      <div class="row custom-row">
    .. elements ..
   </div>
 </div>
</div>