Grid container width is more than page width

[mehrdad-shokri]

Problem description

When Adding a Grid component at the root of a component I notice that class MuiGrid-spacing-xs-16-470 is appended to the root element.
it's width is set to calc(100% + 16px); witch is obviously 16px more than page width.
Is this a bug or I'm missing sth?

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import PropTypes from 'prop-types';
import Header from '../common/Header/Header';
import Sidebar from '../common/Sidebar/Sidebar';
import Grid from 'material-ui/Grid';

class Template extends Component {
    constructor() {
    super();
    this.state = { isDrawerOpen: false };
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this.closeDrawer = this.closeDrawer.bind(this);
    this.setDrawerState = this.setDrawerState.bind(this);
   }

  setDrawerState(state) {
     this.setState({ isDrawerOpen: state });
  }

   toggleDrawer() {
     this.setDrawerState(!this.state.isDrawerOpen);
    }

   closeDrawer() {
      this.setDrawerState(false);
    }

   render() {
      const { component, ...rest } = this.props;
      return (
        <Route
           {...rest}
         render={() => (
          <div>
          <Header
            onDrawerButtonClicked={this.toggleDrawer}
          />
          <Sidebar
               open={this.state.isDrawerOpen}
               onRequestClose={this.closeDrawer}
         />
           <Grid container>
              {component}
            </Grid>
          </div>
        )}
      />
     );
   }
   }
   Template.propTypes = {
    component: PropTypes.element.isRequired,
  };

    export default Template;

Versions

• Material-UI: 1.0.0-beta7
• React: ^15.6.1
• Browser: Chrome 60

[oliviertassinari]

We also set margin: -16px to compensate.

Duplicate of #7466