Position elements relative to parent container

Question

I have a slideshow that looks like this:

<div class="slideshow_cont">
    <div class="slideshow_btn_cont">
    </div>
    <ul class="slideshow">  
    {% for obj in project_list %}
    <li class="slide"> 
    <img class="slideshow_thumb"/>
    <span class="slideshow_thumb_label">
    {{ obj.project_title }}
    </span>
    </li>
    {% endfor %}
    </ul>
</div>

---

.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;
}

How can I add margin

between the first slide and the left border of the slideshow_cont and

between the last slide and the right border of the slideshow_cont ,

so that the slides don't overlap with the buttons?

---

Thank you

Answer 1

You can use :first-child and :last-child pseudo classes to add the margins

Or use padding on the container

Answer 2

SOLVED

I added this function to set the slideshow width equal to slides width x slides n + margin:

$(document).ready(function(){
    var slide_ = $('.slide');
    var slide_w =  slide_.width();
    var slide_n = slide_.length;
    var slide_m = slide_n * 80; // margin
    slideshow_width = slide_n * slide_w + slide_m;
    $('.slideshow').css({'width':slideshow_width});
});

Result: