import React, { Component } from 'react';

/* global styles for app */
import './styles/app.scss';

/* application components */
import { Header } from '../../components/Header';
import { Footer } from '../../components/Footer';

export class App extends Component {
  static propTypes = {
    children: React.PropTypes.any,
  };

  render() {
    return (
      <section>
        <Header />
          <main className="container">
          {this.props.children}
          </main>
        <Footer />
      </section>
    );
  }
}

import React, { Component } from 'react';

/* global styles for app */
import './styles/app.scss';

/* application components */
import { Header } from '../../components/Header';
import { Footer } from '../../components/Footer';

export class App extends Component {
  static propTypes = {
    children: React.PropTypes.any,
  };

  render() {
    return (
      <section>
        <Header />
          <main>
            <div className="container">
              {this.props.children}
            </div>
          </main>
        <Footer />
      </section>
    );
  }
}

Change markup so that main el is outside of container, can take a full width bg color