React boostrapを使ってimageとテキストを同じ割合で横に並べたい。

React Bootstrapを使って左にimage、右にtextという感じの作品紹介のページを作成していますが、実際にブラウザで見ると少し全体的に左に寄ってします。
また、<Card.Img>を<a>で挟んでそのままimageをクリックしたらそのページに飛べるようにしているのですが、<Card.Img>内の画像に謎の余白ができてしまいます。


<Container className="Cards">

        <Row >

          <Card style={{ width: '25rem' }} className="col-lg-6">
            <a href="http://127.0.0.1:5500/index.html" >
              <Card.Img variant="top" src={Image} />
            </a>
          </Card>

          <div className="col-lg-6">
            <h4 className="text-left">This is a web page that introduces Japanese dogs.
              <br />Introducing 6 kinds of dogs (samurai) from <br />Japan with each character.

            </h4>


          </div>
        </Row>

        <Row>

          <Card style={{ width: '25rem' }} className=" col-lg-6">
            <a href="https://proximitynetwork.web.app/">
              <Card.Img variant="top" src={Image3} />
            </a>

          </Card>

          <div className="col-lg-6">
            <h4>A web page created by a team of four people in the Migracode graduation project.<br />
              It is a site where you can search for shops that handle only organic ingredients,
              <br />and shops can also register here to browse their own products.</h4>

            
          </div>

          <small className="copyright">
            <span>© Yusuke 2022</span>
          </small>

        </Row>
      </Container>

CSS

.Cards{
  padding: 0;
  margin-top: 60px;
}

.col-lg-6{
  margin-bottom: 40px;
  
  padding-right: 0;
}

h1{
  margin-top: 30px;
  margin-bottom: 30px;
  color: aliceblue;
  font-size: 3em;
}

h4{
  
  margin-top: 80px;
  margin-left: 30px;
  text-align: left;
  color: aliceblue;
  
}

.copyright{
  margin-top: 70px;
  color: aliceblue;
}

@media screen and (max-width: 480px){
.Cards{

  margin-left: 0px;
}
}


@media screen and (max-width: 480px) { 
  h1 {
    font-size: xx-large;
    
  }
}



@media screen and (max-width: 480px) { 
  h4 {
    /* margin-bottom: 40px; */
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 30px;
    text-align: left;
    font-size: 16px;
    color: chartreuse;
    
  }
}

画像も添付いたします。