title: Horizontal align items Slick Carousel
body: <p>The problem is I'm using Slick Carousel but whenever I add the div to Slick's script I'm using the content moves into a different line.</p>
  
  <p>How it should look.
  <a href="https://i.stack.imgur.com/G2Bz8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G2Bz8.jpg" alt="How it should look"></a></p>
  
  <p>This is what happens as soon as I add the scroll div to Slick script.</p>
  
  <p><a href="https://i.stack.imgur.com/GdBap.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GdBap.jpg" alt="Slick result"></a></p>
  
  <p>I'm almost sure it's a CSS problem but I've tried a lot and can't get it to work. This is my code...</p>
  
  <pre><code>&lt;div class="testimonios"&gt;
          &lt;div class="testimonios__container"&gt;
              &lt;p id="title"&gt;Testimonios&lt;/p&gt;
              &lt;div class="testimonios__container-scroll"&gt;
  
                  &lt;div class="testimonios__container-photo"&gt;
                      &lt;img id="photo" src="img/photo.png"&gt;
                      &lt;p id="message"&gt;&lt;b&gt; Edoardo Perez - Nucliux. &lt;/b&gt;&lt;br&gt;&lt;br&gt;“Humanus logró que mi empresa encontrara los mejores candidatos para satisfacer mis necesidades”. &lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;!--&lt;div class="testimonios__container-photo"&gt;
                      &lt;img id="photo" src="img/photo.png"&gt;
                      &lt;p id="message"&gt;&lt;b&gt; Alan Vázquez - Nucliux. &lt;/b&gt;&lt;br&gt;&lt;br&gt;"Humanus me encanta" &lt;/p&gt;
                  &lt;/div&gt; --&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Slick</p>
  
  <pre><code>&lt;script&gt;
          $(document).ready(function(){
            $('.testimonios__container-scroll').slick({
              autoplay: true,
              autoplaySpeed: 2000,
              infinite: true,
              pauseOnHover: false,
  
            });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>This is the related CSS</p>
  
  <pre><code>.testimonios{
      height: 23vw;
      background: url("../img/testimonios.jpg");
      background-repeat: no-repeat;
  }
  
  .testimonios__container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 80%;
      margin-left: 10%;
      height: 20vw;
  }
  
  .testimonios__container-scroll{
      display: flex;
      flex-direction: center;
      justify-content: center;
      width: 70%;
      height: auto;
      margin-left: 15%;
  }
  
  #photo{
      margin-right: 3vw;
      width: auto;
      height: 10vw;
  }
  
  .testimonios__container-photo{
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: ;
      width: 100%;
      height: 10vw;
      margin-left: ;
  }
  
  #title{
      color: white;
      font-weight: bold;
      font-size: 1.5vw;
      text-transform: uppercase;
      margin-bottom: 2.2vw;
      text-align: center;
      margin-top: 1.5vw;
  }
  
  
  #message{
      color: white;
      font-size: 1.2vw;
      margin-top: 1vw;
      margin-bottom: 1vw;
  }
  </code></pre>
  
  <p>There is a Live Demo <a href="http://nucliux.mx/humanus/" rel="nofollow noreferrer">here</a> scroll to bottom</p>