title: Making my boxes responsive in css
body: <p>I have 8 boxes on my html file, when viewing on the desktop, everything looks OK, visited on the mobile and the colums are way off than it should be, it should be in the center, not in the right side, how would i do that to make it responsive? 
  <a href="https://i.stack.imgur.com/w0EEh.png" rel="nofollow noreferrer">Preview</a></p>
  
  <p>My code for the columns.</p>
  
  <pre><code>.articles {
      margin: 100px;
      background-color: #F5F5F5;
      }
  
   .article {
      margin: 5px;
      display: inline-block;
      width: 340px;
      position: relative;
      float:left;
      left: 155px;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
    }
  
    .article-image {
      width: 100%;
    }
    .article-text-wrapper {
      padding: 20px;
    }
  
    .article-title {
      font-family: 'Roboto', sans-serif;
      font-size: 20px;
      font-weight: 700;
    }
   .article-description {
      font-family: 'Roboto', sans-serif;
      line-height: 16px; 
      font-size: 16px;
      color: rgba(0,0,0,0.7);
      font-weight: 300;
    }
  
    .article-time {
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      color: rgba(0,0,0,0.4);
      font-weight: 300;
    }
  </code></pre>
  
  <p>Thanks alot.</p>