How to center an iframe horizontally?

[sjy]

I have been trying to center a youtube video horizontally on my landing page, but couldn’t do it.

HTML:

<section id="#how-it-works">
          <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen>
        </section>

CSS:

#how-it-works{
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

#how-it-works > iframe{
  max-width: 560px;
  width: 100%;
}

What is the solution?

[lasjorg]

id="#how-it-works"

Are you sure that is how you set an id attribute value?

Edit: Did you understand what the problem is?

freeCodeCamp.org

[sjy]

You are correct.
Didn’t see that coming.

Thanks!