title: How to align items inside container-fluid keeping full-width on resize to match a container on bootstrap 4?
body: <p>I want a full-width container with pictures that can be scrolled, then I have other content on my website that is inside a container...</p>
  
  <p>My question is:
  Is there any way to set a padding-left on my item inside container-fluid that match the content that is outside, (inside a container) when you resize the website? </p>
  
  <p>I mean always be aligned the padding and the container</p>
  
  <p>example:</p>
  
  <p><a href="https://i.stack.imgur.com/tPVeM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tPVeM.jpg" alt=""></a></p>
  
  <p>here is my code atm:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
     &lt;title&gt;&lt;/title&gt;
  
     &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;style type="text/css"&gt;
     .container {
      max-width: 1450px;
      background: lightblue;
     }
     .container-fluid {
      background-color: wheat;
     }
     ul {
      display: flex;
      overflow-x: scroll;
     }
        li {
      list-style: none;
         float: left;
        }
       &lt;/style&gt;
  
    &lt;div class="container"&gt;
     &lt;div class="row"&gt;
      &lt;div class="col-12"&gt;
       &lt;h1&gt;Carousel Header&lt;/h1&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container-fluid px-0"&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/229/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/230/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/231/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/232/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/233/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/234/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/235/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/236/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/237/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/238/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/239/200/300.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://i.picsum.photos/id/240/200/300.jpg"&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
     &lt;div class="row"&gt;
      &lt;div class="col-12"&gt;
       &lt;h2&gt;TEXT&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="col-12"&gt;
       &lt;p&gt;some text&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>