I wrote 3 components, but they work crookedly, what should I do?

Question

React

const main = document.querySelector('.container');

class Header extends React.Component {
  render() {
    return (
      <header>
        <div class="brand">History</div>
        <nav>
          <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
            <li>Menu 5</li>
          </ul>
        </nav>
      </header>
    );
  }
}

class LeftSidebar extends React.Component {
  render() {
    return (
      <aside class="leftSidebar">
      
      </aside>
    );
  }
}

class RightSidebar extends React.Component {
  render() {
    return (
      <aside class="RightSidebar">
      
      </aside>
    );
  }
}

ReactDOM.render(<Header/>,main);
ReactDOM.render(<RightSidebar/>,main);
ReactDOM.render(<LeftSidebar/>,main);

body,html {
  padding: 0;
  margin: 0;
  height: 100%;
  background: #002136;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
}

.leftSidebar {
  width: 15%;
  height: 98%;
  background: url('../img/sidebar.png');
  background-size: 100% 100%;
  margin-top: 1%;
  float: left;
}

.RightSidebar {
  width: 15%;
  height: 85%;
  background: url('../img/sidebarright.png');
  background-size: 100% 100%;
  float: right;
}

This is what it looks like, css reset has been tweaked for any reason but to no avail 0