title: Html - Changing Width and Height of a slider
body: <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>