How do I make this image slider responsive?

I found a great pure CSS slider online that does exactly what I need but the slider isn't responsive. I'd like it to resize based on the viewport size, so that if I drag the browser smaller, the slider resizes smaller along with it.. I've tried lots of suggestions from different websites but none of them worked. What can I do?

#slider {
    width: 952px;
    height: 409px;
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}

<div id="slider">
                    <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
                    <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
                    <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
                    <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>

Solution

Just add max-width:100vw; on #slider to make sure that the width of the slider does not overflow on your body.

DEMO

body{
  margin:0; /* ADDED for SNIPPET Stackoverflow */
}

#slider {
    width: 952px;
    height: 409px;
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
    
    max-width:100vw;              /* ADDED */
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}

<div id="slider">
  <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
  <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
  <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
  <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>