title: React Bootstrap CSS: I want my Container element to fill more of the entire page horizontally
body: <p>In Reactjs, I am creating a container with three equally sized columns. Currently my code creates the three columns but they only occupy the center section of the page, leaving a lot of space to the right and left of the columns.</p>
  
  <p>I want the three columns to take up more of the entire row horizonatally.</p>
  
  <p>Here is my js code:</p>
  
  <pre><code>import React from 'react';
  import { Row, Col, Container } from 'react-bootstrap';
  
  import classes from './PainPoints.css';
  
  const painPoints = (props) =&gt; {
      return (
          &lt;div className={classes.ContentBoxLarge}&gt;
              &lt;div&gt;
                  &lt;div className={classes.SectionHeader}&gt;
                      &lt;h1&gt;Industry Pain Points:&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;Container&gt;
                  &lt;Row&gt;
                      &lt;Col className={classes.Column}&gt;
                          &lt;div&gt;Excessive Fees&lt;/div&gt;
                      &lt;/Col&gt;
                      &lt;Col&gt;
                          &lt;div&gt;Middleman Price Markups&lt;/div&gt;
                      &lt;/Col&gt;
                      &lt;Col&gt;
                          &lt;div&gt;Anonymous Ticket Holders&lt;/div&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Container&gt;
          &lt;/div&gt;
      )
  }
  
  export default painPoints;
  </code></pre>
  
  <p>Here's my CSS code:</p>
  
  <pre><code>.ContentBoxLarge {
      padding: 80px 0;
  }
  
  .Column {
      width: 1170px;
  }
  
  .SectionHeader {
      text-indent: 150px;
      margin: 0 0 0 0;
  }
  
  @media (min-width: 768px) {
      .container {
        width: 750px;
      }
    }
  
  @media (min-width: 992px) {
     .container {
     width: 970px;
     }
  }
  
  @media (min-width: 1200px) {
    .container {
     width: 1170px;
     }
  }
  </code></pre>