title: Position elements relative to parent container
body: <p>I have a slideshow that looks like this:</p>
  
  <pre><code>&lt;div class="slideshow_cont"&gt;
      &lt;div class="slideshow_btn_cont"&gt;
      &lt;/div&gt;
      &lt;ul class="slideshow"&gt;  
      {% for obj in project_list %}
      &lt;li class="slide"&gt; 
      &lt;img class="slideshow_thumb"/&gt;
      &lt;span class="slideshow_thumb_label"&gt;
      {{ obj.project_title }}
      &lt;/span&gt;
      &lt;/li&gt;
      {% endfor %}
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.slideshow_cont{
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      position: relative;
      overflow: hidden;
  }
  .slideshow{
      height:150px;
      width:2000px;
      display:flex;
      justify-content: center;
      align-items: center;
      position:absolute;
      list-style:none;
  }
  .slide{
      width: 140px;
      height: 120px;
      position: relative;
      margin: 0 40;
  }
  </code></pre>
  
  <p>How can I add margin </p>
  
  <p>between the first slide and the left border of the <code>slideshow_cont</code>and</p>
  
  <p>between the last slide and the right border of the <code>slideshow_cont</code>, </p>
  
  <p>so that the slides don't overlap with the buttons?</p>
  
  <p><a href="https://i.stack.imgur.com/pif8s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pif8s.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>Thank you</p>