title: How do I set container within React Material UI's AppBar Component?
body: <p>When I see MUI's default <code>AppBar</code>, its children looks so apart especially in wide screen size. The logo is located completely left, and other navs is located too much right. So Items look so apart each other.</p>
  
  <p>What I want to do is like Bootstrap's component, I want to apply maximum width like below image. How do I set container within <code>AppBar</code>?</p>
  
  <p><a href="https://i.stack.imgur.com/SwxXn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SwxXn.png" alt="enter image description here"></a></p>
  
  <p>This is what I tried.</p>
  
  <pre><code>&lt;AppBar&gt;
      &lt;ToolBar&gt;
          &lt;Grid
               container
               style = {{ maxWidth: 1170 }}
           &gt;
           &lt;Typography&gt;Logo&lt;/Typography&gt; 
           &lt;/Grid&gt;
      &lt;/ToolBar&gt;
  &lt;/AppBar&gt;
  </code></pre>
  
  <p>But it's not worked...</p>