image within link wont center align

Question

I have a bootstrap carousel in my angular app. I added on a tags to the images so that when someone clicks an image it redirects to a particular page. I can't get the image to align to the center of the window (except if I alter the padding, which will cause issues if the window is minimized at all. Also, since I added the a tag, I also can't seem to set the background color of the div containing the image (it was working fine before I added the link).I'll post my HTML and CSS code. Will appreciate any help, thanks!

<ngb-carousel [showNavigationArrows]="true" 
[showNavigationIndicators]="true"
interval="12000"
[keyboard]="true"
[pauseOnHover]="true"
[wrap]="true"
[activeId]="'secondSlide'"
 [interval]="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <a class="nav-link" routerLink="/blog/1">
      <img src="../../assets/img/actual.png" alt="Angular Carousel 1"></a>
    </div>
    <div class="carousel-caption">
      <h3>Title Goes Here</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <a class="nav-link" routerLink="/blog/2">
      <img src="../../assets/img/image0.jpeg" alt="Angular Carousel 2"></a>
    </div>
    <div class="carousel-caption">
      <h3>Title Goes Here</h3>
      <p>Consectetur tortor volutpat pretium.</p>
    </div>
  </ng-template>
</ngb-carousel>

a.nav-link {
  background-color: #361833 !important;
  margin-left: auto !important;
  margin-right: auto !important;

}

a {
  background-color: #361833 !important;

}
 
 div {
   background-color: #361833 !important;
   color: white;
   font-size: 20px;
   font-family: orpheuspro, serif;
   font-style: normal; 
   font-weight: 600 !important;
   /* margin-left: auto !important;
   margin-right: auto !important;
    */
}  

img {
  background-color: #361833 !important;
  display: flex;
  padding-top: 30px ;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 650px;
  height: 450px;
  margin-left: auto !important;
  margin-right: auto !important;
}



h3 {
  background-color: transparent !important;
}

p {
  background-color: transparent !important;
}


ol {
  background-color: transparent !important;
}

li {
  background-color: transparent !important;
}

#ngb-slide-4 {
  background-color: transparent !important;
}


.carousel-caption {
  background-color:transparent !important;
}

.picsum-img-wrapper {
  background-color: #361833 !important;
  /* justify-content: center !important;
  text-align: center !important; */

  /* margin-left: auto !important;
  margin-right: auto !important;
  padding-right: 300px; */
}

div.carousel-inner {
  background-color: #361833 !important;
}

I tried setting margin left and right to auto but no change. Aligning the image/ div containing the image also didnt seem to work.