I'm currently recreating a very basic website I implemented in React beforehand in Angular. However, after getting the logic and the template working correctly, I immediately noticed that the CSS is not being applied correctly, with only small parts working.

Here's the template:

<div className="container text-center">
  <h2>Konzerte</h2><br/><br/><br/>
  <div class="row">
    <div class="col-sm-4" *ngFor="let concert of concerts">
      <a className="concertItem" href="#">
        <p><strong>
          {{concert.name}}
        </strong><br/>
        </p>
        <img class="concertImg" src="assets/bandmember.jpg" alt="Random Name" width="150" height="150">
      </a>
      <p>
        {{concert.events[0]}}<br/>
        {{concert.events[1]}}
      </p>
    </div>
  </div>
</div>

And here are the styles:

.container {
  margin-top: 6em;
  margin-bottom: 6em;
  padding: 40px 120px;
  background: lightgrey;
  border-radius: 24px;
}

a.concertItem {
  text-decoration: none;
  color: black;
}

.concertImg {
  border: 10px solid transparent;
}

.concertImg:hover {
  border-color: darkgrey;
}

I'm also using bootstrap in my index.html. I'd imagine it would have something to do with loading order, but I'm not sure how to fix it. Stuff like the grey border on hover works, but the entire site is not centered and for example the background is missing.

Thanks in advance for any suggestions!