how can I center a text slider

Question

Hey amazing community

I tried to make a text slider on the top bar of my website, and since I am not so good with coding I searched for a solution, and found a good example on codepen

#slider, ul
{
    height: 100px;
}

#slider
{
    margin: auto;
    overflow: hidden;
    padding: 20px;
    margin-top: 50px;
    position: relative;
    width: 600px;
}

#slider li
{
    float: left;
    position: relative;
    width: 600px;
    display: inline-block;
    height: 200px;
}

#slider ul
{
    list-style: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 9000px;
    transition: left .2s linear;
    -moz-transition: left .2s linear;
    -o-transition: left .2s linear;
    -webkit-transition: left .2s linear;
    margin-left: -25px;
  font-family: open sans;
  color: #666;
}

/*** Content ***/

.slider-container
{
  color:#000;
    margin: 0 auto;
    padding: 0;
    width: 550px;
  min-height: 180px;
  text-align:center;
}

.slider-container h2
{
    color: #fff;
}

.slider-container  p
{
    margin: 10px 25px;
    font-weight: semi-bold;
    line-height: 150%;
}

/*** target hooks ****/

@-webkit-keyframes slide-animation {
    0% {opacity:0;}
    2% {opacity:1;}
    20% {left:0px; opacity:1;}
    22.5% {opacity:0.6;}
    25% {left:-600px; opacity:1;}
    45% {left:-600px; opacity:1;}
    47.5% {opacity:0.6;}
    50% {left:-1200px; opacity:1;}
    70% {left:-1200px; opacity:1;}
    72.5% {opacity:0.6;}
    75% {left:-1800px; opacity:1;}
    95% {opacity:1;}
    98% {left:-1800px; opacity:0;} 
    100% {left:0px; opacity:0;}
}

#slider ul
{
    -webkit-animation: slide-animation 20s infinite;
}

#slider ul:hover
{
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

<div id="slider">
<ul>
  <li>
  <div class="slider-container">
    <p>“Went with my wife, absolutely brilliant restaurant, the food tasted beautiful, so much depth and very well presented. As good if not better than any in the city centre. Will definitely be returning.” <br> Nathaniel Harwood – Google</p>
  </div>
  </li>
  
  
    <li>
    <div class="slider-container">
    <p>“Great friendly service, the staff don't make you feel rushed, but are also very attentive, and on hand all the time if needed, best Thai food I have had in years, flavours are out of this world, and extremely good prices for the quality you get is top notch!!!!!! Love it” <br>David Armstrong - Porter – Google</p>
  </div>
  </li>
    <li>
    <div class="slider-container">
    <p>“Possibly one of the best in Manchester. A menu designed and prepared by a very skilled chef, ably assisted by his wife who provides a friendly welcome. Always consistent and of high quality.” <br>Paul Fletcher – Google</p>
  </div>
  </li>
    <li>
    <div class="slider-container">
    <p>“Food was amazing and service could not have been better...we went for a quick lunch as our office is opposite the restaurant...very quick service...I am highly recommending this restaurant to all my family and friends...” <br>Nic Gent – Facebook Page</p>
  </div>
  </li>
   <li>
    <div class="slider-container">
    <p>“Went for the first time last night for my Husbands Birthday, friendly staff, very tasty food, would highly recommend, we will be back.” <br>Joanne Simms – Facebook Page</p>
  </div>
  </li>
   <li>
    <div class="slider-container">
    <p>“A lovely, well decorated restaurant, where great food is served by very friendly staff for a bargain price. The food is authentic and delicious. We'll definitely be returning.”<br>Joe H – Trip Advisor</p>
  </div>
  </li>
</ul>
</div>

I tried to tweak it to my own but I actually ruined it

Everything is fine on desktop but the mobile version is a mess

can anybody help me center this text slider ! here is the site for references bladour.com

Thank you so much in advance