title: How to make Cards Component Responsive and inside Cards is align Center
body: <p>I have some problems with my Cards component. I try to make 5 cards and it works but somehow the size doesn't follow the other cards and the card content is not centered and the text somehow got copied.</p>
  <p>It should be like all card sizes are not affected by the size of the word and the title should be one and middle only.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import styled from 'styled-components';
  
  
  const Cards = styled.div`
      padding: 4rem;
      background: #fff;
  `
  
  const CardsContainer = styled.div`
      display: flex;
      flex-flow: column;
      align-items: center;
      width: 90%;
      max-width: 1120px;
      margin: 0 auto;
  `
  
  const Title = styled.h1`
      text-align: center;
  `
  
  const CardsWrapper = styled.div`
      display: flex;
      flex-flow: column;
      width: 100%;
      margin-top: 20px;
      box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
      -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
      filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
      border-radius: 10px;
      overflow: hidden;
      text-decoration: none;
  `
  
  const CardItems = styled.ul`
      display: flex;
      flex-direction: column;
      margin-bottom: 24px;
  `
  
  const Image = styled.img`
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      color: white;
      background-color: #80808044;
  `
  
  const Info = styled.div`
      text-align: center;
      padding: 20px 30px 30px;
  `
  
  const InfoText = styled.h3`
      color: #252e48;
      margin-bottom: 10px;
  `
  
  const SubText = styled.p`
      color: #252e489c;
      font-size: 14px;
      line-height: 24px;
  `
  
  function InfoCardItem({services}) {
      return (
          &lt;Cards&gt;
              &lt;CardsContainer&gt;
                  &lt;Title&gt;Apa yang sobat cari?&lt;/Title&gt;
                  &lt;CardsWrapper&gt;
                      &lt;CardItems&gt;
                              &lt;Image src={services.img} /&gt;
                              &lt;Info&gt;
                                  &lt;InfoText&gt;{services.text}&lt;/InfoText&gt;
                                  &lt;SubText&gt;{services.sub}&lt;/SubText&gt;
                              &lt;/Info&gt;
                      &lt;/CardItems&gt;
                  &lt;/CardsWrapper&gt;
              &lt;/CardsContainer&gt;
          &lt;/Cards&gt;
      );
  }
  
  export default InfoCardItem;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import styled from "styled-components";
  import { services } from "../data"
  import InfoCardItem from "./InfoCardItem"
  
  const CardsItem = styled.li`
      display: flex;
      flex: 1;
      margin: 0 1rem;
      border-radius: 10px;
  `
  
  function InfoCard() {
    return (
      &lt;CardsItem&gt;
        {services.map(services=&gt;(
          &lt;InfoCardItem services={services} key={services.id}/&gt;
        ))}
      &lt;/CardsItem&gt;
    );
  }
  
  export default InfoCard;</code></pre>
  </div>
  </div>
  </p>
  <p>So the top code error result should be this
  <a href="https://i.stack.imgur.com/es9Db.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/es9Db.png" alt="Result" /></a></p>
  <p>Is there any fix for this problem to make it center content, 1 title only and responsive with mobile?</p>