title: How to remove extra space between card and grid item in material ui
body: <p>I am new to react and was using material ui. I was trying to place a card in a grid item.</p>
  <p>here is my code:</p>
  <pre><code>&lt;GridItem xs={12} sm={12} md={12} style={{ margin: &quot;0rem&quot; }}&gt;
    &lt;Card style={{ margin: &quot;0rem&quot; }}&gt;
      &lt;GridItem xs={2} sm={2} md={2}&gt;
        {/* &lt;Card style={{ margin: &quot;0rem&quot; }}&gt; */}
        &lt;GridItem xs={12} style={{ margin: &quot;0rem&quot; }}&gt;
          &lt;CustomOutlineInput
            style={{ margin: &quot;0rem&quot; }}
            id=&quot;coilID&quot;
            label=&quot;Coil ID&quot;
            variant=&quot;outlined&quot;
            size=&quot;small&quot;
          /&gt;
        &lt;/GridItem&gt;
        {/* &lt;/Card&gt; */}
      &lt;/GridItem&gt;
    &lt;/Card&gt;
  &lt;/GridItem&gt;;
  </code></pre>
  <p>However as you can see some extra spacing is generated in this way how do I remove this and make colums inside the grid item:</p>
  <p><a href="https://i.stack.imgur.com/MW008.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MW008.png" alt="enter image description here" /></a></p>
  <p>Also how do I add text boxes in a single row without increasing the spacing?
  each element is taking extra space:</p>
  <p><a href="https://i.stack.imgur.com/YYpop.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YYpop.png" alt="enter image description here" /></a></p>