title: MUI Grid System to Take Up 100% of Width
body: <p>hope you're all good.</p>
  <p>I'm having an issue finding out how to make my MUI Grid take up the entire width of the Box component it is nested within.</p>
  <p>Here is how it looks:
  <a href="https://i.stack.imgur.com/2A1Ko.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2A1Ko.png" alt="MUI Grid not taking up entire width" /></a></p>
  <p>I want the empty space at the end right to be taken up by the entire grid but I can't seem to find a concise answer on how to fix this.</p>
  <p>Here is my code in VS Code:</p>
  <p><a href="https://i.stack.imgur.com/JqLpl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JqLpl.png" alt="Grid Code" /></a></p>
  <p>Here is the code in text for the Grid:</p>
  <pre><code>&lt;Grid item key={days}&gt;
          &lt;Box
            key={days}
            sx={{
              width: 150,
              height: 150,
              backgroundColor: 'primary.dark',
              '&amp;:hover': {
                backgroundColor: 'primary.main',
                opacity: [0.9, 0.8, 0.7],
              },
            }}
          /&gt;
        &lt;/Grid&gt;
      );
    }
    return (
      &lt;Grid container spacing={1}&gt;
        {/* And here I render the box array */}
        {box}
      &lt;/Grid&gt;
    );
  </code></pre>
  <p>And here is the parent elements:
  <a href="https://i.stack.imgur.com/7cEkB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7cEkB.png" alt="Parent Elements" /></a></p>
  <p>Here is the code in real text for the parent elements:</p>
  <pre><code>// Parent Element
      &lt;Container&gt;
        &lt;Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            width: 1,
          }}
        &gt;
          {/* The Title of The Page */}
          &lt;Typography align=&quot;center&quot; variant=&quot;h4&quot; mt={2} mb={2} sx={{ fontWeight: 'bold' }}&gt;
            {t('Happy Chocolate Days!')}
          &lt;/Typography&gt;
          {/* My Calendar Grid Component Inside The Box Component */}
          &lt;Calendar /&gt;
        &lt;/Box&gt;
      &lt;/Container&gt;
  </code></pre>
  <p>Thanks for any help in advance</p>