title: How to remove extra white space in css Grid?
body: <p>So basically I am using material ui to set up a grid system to display videos in 2 rows. I have achieved the general layout but I can't seem to remove the white space/padding between the elements. I tried nowrap as the docs suggest but it doesn't work as intended. Here is my component:</p>
  <pre><code>                 &lt;Grid
                      container
                      spacing={1}
                      direction=&quot;row&quot;
                      justify=&quot;center&quot;
                      alignItems=&quot;center&quot;
                   &gt;
                      {media.map((media) =&gt; (
                         &lt;Grid item xs={6} key={Math.random()}&gt;
                            &lt;video
                               className=&quot;media__object&quot;
                               autoPlay
                               loop
                               src={media.mp4}
                            /&gt;
                         &lt;/Grid&gt;
                      ))}
                   &lt;/Grid&gt;
  </code></pre>
  <p>Here is some of the css of media__object</p>
  <pre><code>.gif__object {
     border-radius: 5px;
     height: 100%;
     width: 100%;
     object-fit: cover;
  }
  </code></pre>
  <p>Here is what the current situation looks like. I added some background color to make the space easily visible.</p>
  <p><a href="https://i.stack.imgur.com/J9IeB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J9IeB.jpg" alt="enter image description here" /></a></p>
  <p>Thank You!</p>