Add pr-0 class to remove white space right of the image. pr-0– sets the padding-right value to 0

Ref: bootstrap spacing

<Col className="logo-col pr-0">
<img src={aviva} alt="aviva" className="brand-logo" height="75px" width="75px" />
</Col>

This is because if you nest your image inside two col, then these two cols will divide the parent row by half the width and first col will occupy half of the whole width.
So the best way to remove the right space is to nest that two images inside the same col itself like the following.

<Container>
      <Row>
        <Col>
          <div className="form-border">
            <div className="form-box">
              <h1 className="form-title">Compare Cheap Life Insurance</h1>
              <Row className="logo-border">
                <Col className="logo-col">
                  <img
                    src={aviva}
                    alt="aviva"
                    className="brand-logo"
                    height="75px"
                    width="75px"
                  />
                  <img
                    src={aig}
                    alt="aig"
                    className="brand-logo"
                    height="75px"
                    width="75px"
                  />
                </Col>
              </Row>
            </div>
          </div>
        </Col>
      </Row>
    </Container>

I am using Bootstrap with React. I have images that are producing whitespace to the right.

But I have inspected the elements and can’t seem to remove this. I have looked online about Bootstrap Col but still can’t spot the issue. I don’t have any CSS related to the Col or img, but I have tried padding-right: 0px !important and margin-right: 0px

HTML:

 <Container>
      <Row>
        <Col>
          <div className="form-border">
            <div className="form-box">
              <h1 className="form-title">Compare Cheap Life Insurance</h1>
                <Row className="logo-border">
                  <Col className="logo-col">
                    <img src={aviva} alt="aviva" className="brand-logo" height="75px" width="75px" />
                  </Col>
                  <Col className="logo-col">
                    <img src={aig} alt="aig" className="brand-logo" height="75px" width="75px"/>
                  </Col>
                </Row>
            </div>
          </div>
        </Col>
      </Row>
    </Container>

Any help would be appreciated. 🙂

https://codesandbox.io/s/little-field-xtr48?from-embed