title: why is CSS grid behaving like this for smalller screen?
body: <p>I created a grid (class container) to kind of look like a card . But after trying it out for smaller screens ( below 400px ) the grid seems to add a lot of margin to the right side . The code is <a href="https://codepen.io/novice_rushed_developer/pen/BaKexow" rel="nofollow noreferrer">here</a> or given below. This is the screenshot for <a href="https://i.stack.imgur.com/hqw0e.png" rel="nofollow noreferrer">bigger screen</a> and <a href="https://i.stack.imgur.com/xjWtH.png" rel="nofollow noreferrer">smaller screen</a></p>
  <p>If you can see the grid .container it puts too much margin to the right for smaller screen size.</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>*{
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
  }
  
  body {
      font-family: 'Ubuntu' , sans-serif;
      background-color: rgb(92, 87, 87);
      color: white;
      background-image: repeating-linear-gradient(33deg ,rgb(247, 204, 36) 0% 7%, rgb(233, 192, 30) 7%  9%);
  
      }
  
  .container {
      display: grid;
      grid-template-columns: 100%;
      margin:2%;
      border-radius: 15px;
      background-color: rgb(75, 75, 74);
      box-shadow: 0px 0px 15px 2px rgb(41, 40, 40);
      border: 2px solid rgb(0, 255, 0);  
  
  }
  
  .nav-wrapper {
      display: flex;
      text-transform: uppercase;
      justify-content: space-between;
      padding: 1%;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      color: rgb(255, 255, 255);
  }
  
  .nav-left {
      display: flex;    
  }
  
  
  .nav-link{
      list-style: none;
      margin-right: 40px;
      
  
  }
  
  .nav-left a {
      text-decoration: none;
      color: white;
  }
  
  .portfolio-main-card {
      display: flex;
      align-items: center;
      justify-content: space-around;
      border:2px solid yellow;
      background-color: rgb(134, 107, 134);
      width: 100%;
      height: 50vh;
      
     
  }
  
  .my-image {
      flex:1;
      height: 100%;
  }
  .my-image img{
      height:100%;
      object-fit:contain;
      width: 100%;
  }
  
  .my-text {
      display: flex;
      flex:1;
      justify-content: center;
  }
  
  .my-text-p{
      font-size: 0.9em;
      font-weight: 600;
  
  }
  
  .portfolio-cards-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    
      grid-auto-rows: auto;
      margin: 30px 30px 60px 30px;
  }
  
  .card {
      border-radius: 3px;
      padding:0.5rem;
      background-color: rgb(66, 62, 62);
      color: #feda6a;
      box-shadow:0px 0px 16px  rgb(0, 0, 0)  ;
      margin:20px 20px 10px 20px;
  
  }
  
  .projects {
      margin: 20px;
  }
  
  .projects &gt; p {
      text-align: center;  
      font-weight: 600;  
  }
  
  @media(max-width : 600px) {
      .container {
          background-color: rgb(133, 115, 115);
          grid-template-columns: 95%;
      }
  
      .portfolio-main-card {
          display: flex;
          flex-direction: column;
          background-color: red;
      }
  
      .portfolio-cards-wrapper {
          display: grid;
          grid-template-columns: 1fr;
      }
  
  
  }  
  
  @media(max-width:370px) {
      .container {
          grid-template-columns: 100%;
          background-color: rgb(0, 255, 0);
          margin: 0%;
          border-radius: 0;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&amp;family=Ubuntu:wght@300&amp;display=swap" rel="stylesheet"&gt;        &lt;link rel="stylesheet" href="decorate.css"&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Hello world&lt;/title&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;div class="container"&gt;
              
              &lt;div class="nav-wrapper"&gt;
                      &lt;div class="nav-left"&gt;
                              &lt;li class="nav-link"&gt;&lt;a  href="#"&gt;education&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-link"&gt;&lt;a  href="#"&gt;work&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-link"&gt;&lt;a  href="#"&gt;certificates&lt;/a&gt;&lt;/li&gt;
                      &lt;/div&gt;
                      
                      &lt;div class="nav-right"&gt;
                              &lt;p&gt;name&lt;/p&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="portfolio-main-card"&gt;
                          &lt;div class="my-image"&gt;
                              &lt;img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fhyperallergic.com%2Fwp-content%2Fuploads%2F2016%2F01%2FCat_023-FF.jpg&amp;f=1&amp;nofb=1" alt=""/&gt;
  
                          &lt;/div&gt;
                          &lt;div class="my-text"&gt;
                              &lt;div class="my-text-p"&gt;
                                  &lt;p&gt;Welcome to my portfolio&lt;/p&gt;
                              &lt;/div&gt;
                              
                          &lt;/div&gt;
              &lt;/div&gt;
                      
              &lt;div class="projects"&gt;
                  &lt;p&gt;PROJECTS&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="portfolio-cards-wrapper"&gt;
                      &lt;div class="card"&gt;
                          &lt;h4&gt;machine learning&lt;/h4&gt;
                          &lt;p class="card-details"&gt;looking for details&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="card"&gt;
                          &lt;h4&gt;computer vision&lt;/h4&gt;
                          &lt;p class="card-details"&gt;wow&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="card"&gt;
                          &lt;h4&gt;python&lt;/h4&gt;
                          &lt;p class="card-details"&gt;My python projects are as follows&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="card"&gt;
                          &lt;h4&gt;final year project&lt;/h4&gt;
                          &lt;p class="card-details"&gt;My final year project&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt; 
  
              
                      
          &lt;/div&gt;       
  
      &lt;/body&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>