title: Material UI grid: how only space between elements on the inside, not outside
body: <p>I ran into this issue where I have several Material UI Cards in a MUI Grid component. I would like the left side of this grid perfectly vertically aligned with the title above.</p>
  <p>I tried putting a spacing={2} on the Grid container, but this causes that the padding of the Grid item also is on the left side, which makes it not aligned with the title above anymore. Is there a way to simply have this padding on the inside between the different Grid items?</p>
  <pre><code>&lt;Box my={2}&gt;
      &lt;Typography variant='h6'&gt;
          Hoeveel spaart u maandelijks tot uw pensioen?
      &lt;/Typography&gt;
  &lt;/Box&gt;
  &lt;Grid className={classes.scenarioBlock} container spacing={2}&gt;
      &lt;Grid item xs={12} sm={6}&gt;
          &lt;ScenarioOption selected {...monthlySavingGoal}&gt;
              &lt;CustomSlider
                  onChange={
                    value =&gt;
                      setAmounts(state =&gt; ({ ...state, monthlySavings: value }))
                    // should we check the scenario when they move the slider?
                    // if (!selected[name]) setSelected((state) =&gt; ({ ...state, [name]: true }));
                  }
                  color='primary'
                  value={amounts.monthlySavings}
                  min={monthlySavingGoal.sliderValues.min}
                  max={monthlySavingGoal.sliderValues.max}
                  step={monthlySavingGoal.sliderValues.step}
                /&gt;
          &lt;/ScenarioOption&gt;
      &lt;/Grid&gt;&lt;/Grid&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6VUAV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6VUAV.png" alt="enter image description here" /></a></p>