title: responsive flexbox lists for columns and grid
body: <p>I cant figure out how to center the lists for smaller devices. it does not stay at the center, there is always an extra space, i have used the text-align CSS and it still did not work. i think my approach to making  responsive columns is wrong. i also tried the flex wrap, it didn't fix it. </p>
  
  <p><a href="https://i.stack.imgur.com/b60JT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b60JT.png" alt="enter image description here"></a></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-css lang-css prettyprint-override"><code>body {
    font-family: Nunito, sans-serif;
    color: rgba(0, 0, 0, .8);
    font-weight: 400;
    line-height: 1.4;
  }
  
  @font-face {
    font-family: "selawk";
    src: url("css/fonts/selwak.ttf");
  }
  
  a:hover {
    border-bottom: 3px solid #364067;
  }
  
  img {
    max-width: 100%;
    padding: 0;
    margin: 0 0 1.45rem
  }
  
  h1 {
    font-size: 2.25rem
  }
  
  h1,
  h2 {
    padding: 0;
    margin: 0 0 1.45rem;
    color: inherit;
    font-weight: 700;
    text-rendering: optimizeLegibility;
    line-height: 1.1;
    font-family: 'selawk', Arial, sans-serif;
  }
  
  h2 {
    font-size: 1.62671rem
  }
  
  h3 {
    font-size: 1.38316rem
  }
  
  h3,
  h4 {
    padding: 0;
    margin: 0 0 1.45rem;
    color: inherit;
    font-weight: 700;
    text-rendering: optimizeLegibility;
    line-height: 1.1
  }
  
  h4 {
    font-size: 1rem
  }
  
  @media only screen and (max-width: 3000px) and (min-width: 768px) {
    .wriaper {
      text-align: left;
    }
    .wriaper ul {
      display: flex;
      padding: 1px;
      list-style: none;
      justify-content: center;
    }
    .wriaper li {
      background-color: rgba(180, 236, 219, 0.52);
      width: 200px;
      height: 200px;
      margin: 60px;
      border-radius: 10px;
    }
    .eature-icon {
      text-align: center;
      padding-top: 50px;
      margin-top: 50px;
    }
    .spp {
      text-align: center;
      color: #1B7E61;
    }
    /* Animation */
    @keyframes fadeInUp {
      from {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
      }
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    @-webkit-keyframes fadeInUp {
      from {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
      }
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    .animated {
      animation-duration: 1s;
      animation-fill-mode: both;
      -webkit-animation-duration: 1s;
      -webkit-animation-fill-mode: both;
    }
    .animatedFadeInUp {
      opacity: 0;
    }
    .fadeInUp {
      opacity: 0;
      animation-name: fadeInUp;
      -webkit-animation-name: fadeInUp;
    }
    *,
    *::after,
    *::before {
      box-sizing: border-box;
    }
  }
  
  @media only screen and (max-width: 768px) {
    ul {
      padding: 1px;
      list-style: none;
      justify-content: center;
    }
    li {
      background-color: rgba(180, 236, 219, 0.52);
      width: 200px;
      height: 200px;
      margin-inline: 250px;
      border-radius: 26px;
      list-style: none;
    }
    /* Animation */
    @keyframes fadeInUp {
      from {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
      }
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    @-webkit-keyframes fadeInUp {
      from {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
      }
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    .animated {
      animation-duration: 1s;
      animation-fill-mode: both;
      -webkit-animation-duration: 1s;
      -webkit-animation-fill-mode: both;
    }
    .animatedFadeInUp {
      opacity: 0;
    }
    .fadeInUp {
      opacity: 0;
      animation-name: fadeInUp;
      -webkit-animation-name: fadeInUp;
    }
    *,
    *::after,
    *::before {
      box-sizing: border-box;
    }
    .feature-item {
      display: flex;
      margin-bottom: 60px
    }
    .feature-icon {
      background: linear-gradient(135deg, #ad2ab9, #ff618c);
      width: 50px;
      flex-basis: 50px;
      flex-shrink: 0;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      margin: 15px
    }
    .feature-icon&gt;svg {
      display: block
    }
    .eature-icon {
      text-align: center;
      padding-top: 50px;
      margin-top: 50px;
    }
    .spp {
      text-align: center;
      color: #1B7E61;
    }
    .fonrt {
      margin-top: 10px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Testing font&lt;/h1&gt;
  &lt;div class="animated animatedFadeInUp fadeInUp"&gt;
    &lt;div class="wriaper"&gt;
      &lt;ul&gt;
        &lt;li class="eature-item"&gt;
          &lt;div class="eature-icon"&gt;
            &lt;svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
                                  &lt;path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/&gt;
                                  &lt;/svg&gt;
          &lt;/div&gt;
          &lt;div class="spp"&gt;&lt;strong&gt;Secure&lt;/strong&gt;&lt;/div&gt;&lt;span&gt;&lt;/span&gt;
        &lt;/li&gt;
        &lt;li class="eature-item"&gt;
          &lt;div class="eature-icon"&gt;
            &lt;svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
                                  &lt;path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/&gt;
                                  &lt;/svg&gt;
          &lt;/div&gt;
          &lt;div class="spp"&gt;&lt;strong&gt;Secure&lt;/strong&gt;&lt;/div&gt;&lt;span&gt;&lt;/span&gt;
        &lt;/li&gt;
        &lt;li class="eature-item"&gt;
          &lt;div class="eature-icon"&gt;
            &lt;svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
                                  &lt;path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/&gt;
                                  &lt;/svg&gt;
          &lt;/div&gt;
          &lt;div class="spp"&gt;&lt;strong&gt;Secure&lt;/strong&gt;&lt;/div&gt;&lt;span&gt;&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>