title: ContainerDiv that self-adjusts width to random number of images loaded inside breaks apart when i insert it inside another div
body: <p>It has been two days im trying to solve this and i cant.</p>
  
  <p>I made a customized div that displays images in a kind of a bar that auto-adjusts itself and stays centered.</p>
  
  <p>And i made it work here:</p>
  
  <p><a href="https://codepen.io/SCalmStorm/pen/povwaed" rel="nofollow noreferrer">https://codepen.io/SCalmStorm/pen/povwaed</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  
  
  &lt;head&gt;
  &lt;style&gt;
  .imgstyle{
          display: inline-block;
    width: 40px;
    height: auto;
    background-position: 50px 50px;
    background-size: cover;
    border-radius: 50%;
      margin-right: 10px;
  
  }
  #containerItem{
      margin: auto;
      Position: relative;
      top: 65px;
      background: green;
  
      min-width: 10px;
      max-width: 700px;
      height:50px;
      border-radius: 50px;
      box-shadow: 0 0 10px 2px;
      z-index: 21;
      padding: 5px 5px;
      white-space:nowrap;
      overflow-x: auto;
      overflow-y: hidden;
  }
  body {
      background-size: cover;
      background-color: khaki;
  
      --hue: var(--hue-neutral);
      padding: 0;
      margin: 0;
  
      display: flex;
      width: 100vw;
      height: 100vh; 
      justify-content: center;
      align-items: center; 
  
  }
  &lt;/style&gt;
  
  
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;!--    &lt;link href="styles.css" rel="stylesheet"&gt; --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Quantico&amp;display=swap" rel="stylesheet"&gt;
  
  
      &lt;title&gt;Quiz App&lt;/title&gt;
  
     &lt;!-- &lt;link rel="stylesheet" href="css/style.css"&gt; --&gt;
  &lt;/head&gt;
  &lt;div class="bg"&gt;&lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                crossorigin="anonymous"&gt;        
   &lt;/script&gt;
  
  
  &lt;body&gt;
  &lt;div id="containerItem"&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  
   &lt;script&gt; 
      number = Math.floor(Math.random() * 20) + 1  
      alert(number)
  for (i = 0; i &lt; number; i++) {
  var img = document.createElement('img')
      document.getElementById('containerItem').appendChild(img);
  
  
          img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
          img.className = "imgstyle";
  }
  
  var newDiv = document.createElement('img')
  newDiv.id = "containerItem"
  
  
  
  
   &lt;/script&gt;
  
  &lt;/html&gt;
  
  </code></pre>
  
  <p>And that is great. But as i worked on my other script i needed it inserted in another div with the class StandardSlide. But it completely breaks apart :(. And the only thing i understand is that it conflicts with the position:fixed. But when i turn it off, or change it to others it messes up my container. How can i solve this without messing it up? Or without changing the fixed? Why is the fix from this new container affecting the other divs :(, i know it has to do with the relative that inherits the parent style :(:</p>
  
  <p>This one, it no longer adjusts the green bar to the images.</p>
  
  <p><a href="https://codepen.io/SCalmStorm/pen/xxbPqVw" rel="nofollow noreferrer">https://codepen.io/SCalmStorm/pen/xxbPqVw</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  
  
  &lt;head&gt;
  &lt;style&gt;
  .imgstyle{
          display: inline-block;
    width: 40px;
    height: auto;
    background-position: 50px 50px;
    background-size: cover;
    border-radius: 50%;
      margin-right: 10px;
  
  }
  
  .StandardSlide{
      Position: fixed;
      top: 10%;
      background: rgba(75, 39, 73, 0.7);
      left: 15%;
      right: 15%;
      /*width: 80%;*/
      bottom: 5%;
      /*background-color: white;*/
      border-radius: 5px;
      padding: 10px;
      box-shadow: 0 0 10px 2px;
      z-index: 20;
  }
  
  #containerItem{
      margin: auto;
      Position: relative;
      top: 65px;
      background: green;
  
      min-width: 10px;
      max-width: 700px;
      height:50px;
      border-radius: 50px;
      box-shadow: 0 0 10px 2px;
      z-index: 21;
      padding: 5px 5px;
      white-space:nowrap;
      overflow-x: auto;
      overflow-y: hidden;
  }
  body {
      background-size: cover;
      background-color: khaki;
  
      --hue: var(--hue-neutral);
      padding: 0;
      margin: 0;
  
      display: flex;
      width: 100vw;
      height: 100vh; 
      justify-content: center;
      align-items: center; 
  
  }
  &lt;/style&gt;
  
  
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;!--    &lt;link href="styles.css" rel="stylesheet"&gt; --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Quantico&amp;display=swap" rel="stylesheet"&gt;
  
  
      &lt;title&gt;Quiz App&lt;/title&gt;
  
     &lt;!-- &lt;link rel="stylesheet" href="css/style.css"&gt; --&gt;
  &lt;/head&gt;
  &lt;div class="bg"&gt;&lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                crossorigin="anonymous"&gt;        
   &lt;/script&gt;
  
  
  &lt;body&gt;
  &lt;div class="StandardSlide"&gt;
    &lt;div id="containerItem"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  
   &lt;script&gt; 
      number = Math.floor(Math.random() * 20) + 1  
      //alert(number)
  for (i = 0; i &lt; number; i++) {
  var img = document.createElement('img')
      document.getElementById('containerItem').appendChild(img);
  
  
          img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
          img.className = "imgstyle";
  }
  
  var newDiv = document.createElement('img')
  newDiv.id = "containerItem"
  
  
  
  
   &lt;/script&gt;
  
  &lt;/html&gt;
  
  
  
  </code></pre>