React-Bootstrap Rows/Columns are not the full width of the screen (Only 50% of it)

By default in bootstrap, container width and max-width is set to some px like,

@media (min-width: 768px)
.container {
    max-width: 720px;
}

@media (min-width: 576px)
.container {
    max-width: 540px;
} 

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

You have to set max-width: 100% like,

.container {
  max-width: '100%'  //This will make container to take screen width
}

Or, Another way is, you can add fluid prop to Container,

fluid - Allow the Container to fill all of it's availble horizontal space.

<Container fluid>
  ...
</Container>

Note: Here Col will take by default equal space.

The Col lets you specify column widths across 5 breakpoint sizes (xs, sm, md, large, and xl).

For example,

<Row>
    <Col xs={6} md={8}>
      xs=6 (6 parts of screen on small screen) md=8 (8 parts of screen on medium screen)
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
</Row>

I had the same issue, and my root component wasn't 100% wide. Setting the width to 100% fixed the issue.

#root {
    width: 100%;
}