Can't center iframe on page

[clintjk]

Hello! I am trying to use a spotify embed iframe on my homepage:

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/26DdCbuwHRX1BgWeHQIn1C?utm_source=generator" 
width="100%" 
height="352" 
frameBorder="0" 
allowfullscreen="" 
allow="autoplay; 
clipboard-write; 
encrypted-media; 
fullscreen; 
picture-in-picture" 
loading="lazy">
</iframe>

I have added this to my _index.md homepage and am using the 'profile' layout. I wanted the iframe to stretch to the maxmimum width and change dynamically (smaller if on a phone and larger if on a desktop)

However, using width="100%" does not set the width to the full width of the page, and changing the width using set values makes the iframe extend to the right and it is no longer centered.

I have tried using css in the custom.css to align it correctly and ensure it sizes dynamically but it doesn't work:

iframe{
  width:40vw;
  height:200px;
  display: flex;
  align-self: stretch;
  justify-content: center;
}

the embed just extends in the right direction. What is the best way to set the width to the page width (with padding) and adjust depending on the display width of a device?

I apologise if this is too much for discussions please let me know if this is something for stack overflow