How to align the contents left side of a full-width container relative to a fixed-width container

Question

I have a problem with the left indent for the .col-sm-4 Unable to align its content relative to the container with a fixed width.

    .container {       
      max-width: 1200px;
      margin: 0 auto;  
    }
    
    .fluid-cintainer {       
      width: 100%;
      margin: 0 auto;  
    }

HTML

<main>
      <div class="container"></div>
      <div class="fluid-cintainer">
        <div class="row">
          <div class="col-sm-4"></div>
          <div class="col-sm-8"><img src="" alt="Full width of .col-sm-8"></div>
        </div>
      </div>
    </main>

Answer 1

You're almost there.

What you've actually done is close the .container class too early.

You need to have your Fluid-cintainer inside your .container class.

<main>
  <div class="container">
    <div class="fluid-cintainer">
      <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-8"></div>
      </div>
    </div>
  </div>
</main>

This will make your CSS work