title: React-Bootstrap Rows/Columns are not the full width of the screen (Only 50% of it)
body: <p>My experience with CSS and Bootstrap, when it comes to positioning and resizing elements on the screen, has been bloody awful ever since I started writing HTML. All I am trying to do (in my React project) is position 2 elements on the screen side by side, the element on the left needs to be 80% of the screens width and the element on the right has to be 20% of the screens width. Obviously for bootstrap to be able to do this, it requires 4 weeks writing code, 20+ stack overflow questions and 1 human sacrifice.</p>
  
  <p>Below is the main app component with a <code>&lt;React.Fragment/&gt;</code> tag and a <code>&lt;Container/&gt;</code> with <code>&lt;Row/&gt;</code> and <code>&lt;Col/&gt;</code> inside that:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Container, Row, Col } from "react-bootstrap";
  
  class App extends Component {
    state = {};
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;Container&gt;
            &lt;Row&gt;
              &lt;Col&gt;Hello&lt;/Col&gt;
              &lt;Col&gt;Hello2&lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Container&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default MainContent;
  </code></pre>
  
  <p>Expected result? <code>Hello</code> will be on the left of screen and <code>Hello2</code> will be on the right of screen smack bang in the middle. Just as the docs suggest <a href="https://react-bootstrap.github.io/layout/grid/" rel="noreferrer">here</a>.</p>
  
  <p>But of course that doesn't happen. The row is centered in the middle of the screen and is about half of the screen size in total width.</p>
  
  <p>To illustrate:
  <code>25% Whitespace | Hello1 | Hello2 | 25% Whitespace</code></p>
  
  <p>Honestly, I have no idea what to do. Setting the margins to 0 will put it on the left of screen but it is still not the full width.</p>
  
  <p>Someone please help me, I've had enough :(</p>