title: I am trying to replicate this carousel of images and i am having issues with the styling
body: <p>I tried to replicate the carousel with this code, but the buttons are not behaving how the image looks and I'm not very certain of the code, because it needs to be responsive and work on different screens.</p>
  
  <p>CSS</p>
  
  <pre><code>.slider {
    display: inline-block;
    margin: 1px;
  }
  
  .slide {
    width: 300px;
    height: 130px;
  }
  
  .carouselInput1 {
    width: 300px;
    height: 67px;
    font-size: 18px;
    line-height: 22px;
    color: #313133;
    font-family: "Arial";
    font-weight: bold;
  }
  
  .carouselInput2 {
    width: 260px;
    height: 19px;
    font-size: 14px;
    line-height: 22px;
    color: #000000;
    font-family: "Arial";
  }
  
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="carousel"&gt;
        &lt;div class="slider"&gt;
          &lt;button class= "next button"&gt;&amp;#8249; &lt;/button&gt;
          &lt;img class="slide" src="../assets/Picture1.jpg"/&gt;
            &lt;p class="carouselInput1"&gt;Lorem Ipsum dolore test content goes here and here if there is &lt;/p&gt;
            &lt;p class="carouselInput2"&gt;Name here, Location here&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="slider"&gt;
          &lt;img class="slide" src="../assets/Picture2.jpg"/&gt;
          &lt;p class="carouselInput1"&gt;Lorem Ipsum dolore test content goes here and here if there is &lt;/p&gt;
          &lt;p class="carouselInput2"&gt;Name here, Location here&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="slider"&gt;
          &lt;img class="slide" src="../assets/Picture3.jpg"/&gt;
          &lt;div class="carouselInput"&gt;
            &lt;p class="carouselInput1"&gt;Lorem Ipsum dolore test content goes here and here if there is &lt;/p&gt;
            &lt;p class="carouselInput2"&gt;Name here, Location here&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="slider"&gt;
          &lt;img class="slide" src="../assets/Picture4.jpg"/&gt;
          &lt;div class="carouselInput"&gt;
            &lt;p class="carouselInput1"&gt;Lorem Ipsum dolore test content goes here and here if there is &lt;/p&gt;
            &lt;p class="carouselInput2"&gt;Name here, Location here&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Nbpzh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nbpzh.jpg" alt="enter image description here"></a></p>