title: Issue with slider in HTML and CSS
body: <p>Thank you for looking into my issue.</p>
  <p>I am creating a small website: <a href="http://testgod0312.000webhostapp.com/" rel="nofollow noreferrer">http://testgod0312.000webhostapp.com/</a>
  I have an issue with my slider.</p>
  <ol>
  <li><p>I can't position the <code>p</code> below the image. There is a problem with the height currently absolute from top of section. More importantly, I struggle to align the <code>p</code> in the middle of the screen</p>
  </li>
  <li><p>There is a weird item at the end of each <code>p</code> and I don't know how to remove it...</p>
  </li>
  <li><p>I struggle to position the arrows, I would like them on the border of the image, not border of the screen.</p>
  </li>
  </ol>
  <p>My <code>p</code> and <code>img</code> are absolute positions, because I have to overlap them. Then with a JS script, an image becomes active and the other non active.</p>
  <p>The HTML is:</p>
  <pre><code> &lt;div class=&quot;slider&quot;&gt;
      &lt;h2&gt;&lt;span class=&quot;red&quot;&gt;The Hierarchy&lt;/span&gt;&lt;/h2&gt;
      &lt;img src=&quot;assets/img/Slider/img1.jpg&quot; alt=&quot;img1&quot; class=&quot;img__slider active&quot; /&gt;
      &lt;img src=&quot;assets/img/Slider/img2.jpg&quot; alt=&quot;img2&quot; class=&quot;img__slider&quot; /&gt;
      &lt;img src=&quot;assets/img/Slider/img3.jpg&quot; alt=&quot;img3&quot; class=&quot;img__slider&quot; /&gt;
      &lt;p class=&quot;p__slider active&quot;&gt; test 1 blqblqbqbl blqblqbqbl blqblqbqbl blqblqbqbl &lt;/p&gt;
      &lt;p class=&quot;p__slider&quot;&gt; test 2&lt;/p&gt;
      &lt;p class=&quot;p__slider&quot;&gt; test sdaa&lt;/p&gt;
      &lt;div class=&quot;suivant&quot;&gt;
          &lt;i class=&quot;fas fa-chevron-circle-right&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class=&quot;precedent&quot;&gt;
          &lt;i class=&quot;fas fa-chevron-circle-left&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The CSS is here (also slider.css in the asset folder on site):</p>
  <pre><code>.slider {
      height: 62vh;
      position: relative;
      margin: auto;
      background: var(--color1);
      justify-content: center;
      text-align: center;
  }
  
  .slider h2 {
      margin-bottom: 1rem;
      font-size: 2rem;
      text-align: center;
  }
  
  .slider img {
      object-fit: cover;
      max-width: 1200px;
      height: 50vh;
      width: 90%;
      position: absolute;
      opacity: 0;
      transition: opacity .5s;
      transform: translateX(-50%);
  }
  
  .slider img.active {
      opacity: 1;
  }
  
  .slider p {
      margin: auto;
      font-size: 1.5rem;
      position: absolute;
      top: 57vh;
      opacity: 0;
      transition: opacity .5s;
      color: var(--color2);
      max-width: 1200px;
      width: 1200px;
  }
  
  .slider p.active {
      opacity: 1;
  }
  
  .suivant, .precedent {
      color: #fff;
      font-size: 2.5rem;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
  }
  
  .suivant {
      right: 1rem;
  }
  
  .precedent {
      left: 1rem;
  }
  </code></pre>
  <p>To note, suivant refers to the next arrow and precedent to the previous arrow.</p>
  <p>Thank you for your help guys!!</p>