Html - Changing Width and Height of a slider
<p>I'm creating a dynamic website with PHP and HTML for educational purposes .</p>

<p>I've been trying to create a 'slideshow' like the one in this video. 
<a href="https://www.youtube.com/watch?v=L-vBR3vzOe8" rel="nofollow">https://www.youtube.com/watch?v=L-vBR3vzOe8</a></p>

<p>However I've been having difficulties to set the desired amount of width and height ( it is way too small). I've been playing around with the code for the last hour and I can't figure it out. </p>

<p>Is anyone kind enough to point me in the right direction ?</p>

<p>My code is looking something like this:</p>

<p>CSS code:</p>

<pre><code>@keyframes slider {

0% {
    left: 0;
}

20% {
    left: 0;
}

25% {
    left: -100%;
}

45% {
    left: -100%;

}

50% {
    left: -200%;

}

70% {
    left: -200%;
}

75% {
    left: -300%;
}

95% {
    left: -300%;
}

100% {
    left: -400%;

}

}

#slider {
    overflow: hidden;

}

#slider figure img {
    width:20%;
    float: left;

}

#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slider infinite; 

}
</code></pre>

<p>This is my HTML code:</p>

<pre><code>  &lt;div id ="slider" &gt;
             &lt;figure&gt;
             &lt;img src ="Images/img1.jpg"&gt;
             &lt;img src ="Images/img2.jpg"&gt;
             &lt;img src ="Images/img3.jpg"&gt;
             &lt;img src ="Images/img4.jpg"&gt;

            &lt;/figure&gt;
        &lt;/div&gt;
</code></pre>

<p>Thanks in advance.</p>