title: Margin problem not set in tablet view and mobile view
body: <p>[This is mobile view<a href="https://i.stack.imgur.com/lKuyB.jpg" rel="nofollow noreferrer">This is desktop view[This is tablet view]<a href="https://i.stack.imgur.com/5nRHk.jpg" rel="nofollow noreferrer">1</a> </a>Hello, I make HTML and CSS  icon box shadow hover effect. The desktop's resolution  is perfect. But tablet view and mobile's  view is not fit with display size. It seems like a resolution issue. Could you please help me to fix issue?
  Here i send my code and pics.</p>
  
  <p>HTML </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 {
    margin: 0;
    padding: 0;
    outline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'poppins', sans-serif;
  }
  
  .container {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .container .box {
    position: relative;
    width: 300px;
    flex-direction: row;
    padding: 40px;
    background: #fff;
    margin: 20px;
    transition: 0.4s;
  }
  
  .container .box .icon {
    width: 120px;
    top: -45px;
    height: 120px;
    position: relative;
    color: #fff;
    background: rgba(0, 0, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 60px;
  }
  
  .icon:after {
    content: '';
    position: absolute;
    width: 110%;
    height: 110%;
    box-shadow: 0 0 0 3px blue;
    border-radius: 50%;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
    box-sizing: border-box;
  }
  
  .box:hover {
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
    transform: translateY(-10px);
  }
  
  .box:hover .icon:after {
    opacity: 1;
    transform: scale(1);
  }
  
  .container .box .content h3 {
    font-size: 20px;
    margin: 10px 0;
    padding: 0;
    text-align: center;
  }
  
  .container .box .content p {
    margin: 0;
    padding: 0;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;enter image description here
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://cdn.onlinewebfonts.com/svg_info/l/31895/0/icon.css"&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="css/intex.css"&gt;
    &lt;style&gt;
  
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="box"&gt;
        &lt;div class="icon i_tools"&gt;&lt;/div&gt;
        &lt;div class="content"&gt;
          &lt;h3&gt;Our vision&lt;/h3&gt;
          &lt;p&gt;Our firm continuously strives to be the Premier Accounting and Consultancy firm that provides excellent service to our clients and an excellent quality of life for our associates.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
        &lt;div class="icon i_bulb"&gt;&lt;/div&gt;
        &lt;div class="content"&gt;
          &lt;h3&gt;Our mission&lt;/h3&gt;
          &lt;p&gt;Our firm continuously strives to be the Premier Accounting and Consultancy firm that provides excellent service to our clients and an excellent quality of life for our associates.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="box"&gt;
        &lt;div class="icon i_handshake"&gt;&lt;/div&gt;
        &lt;div class="content"&gt;
          &lt;h3&gt;Our value&lt;/h3&gt;
          &lt;p&gt;Our firm continuously strives to be the Premier Accounting and Consultancy firm that provides excellent service to our clients and an excellent quality of life for our associates.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>