横幅未居中其内容

Question

我试图理解为什么这段简单的 HTML 和 CSS 不起作用。我究竟做错了什么？我正在为将在页面最顶部显示的横幅添加一个容器。该横幅的内容应使用

margin: 0 auto;

水平居中，但它仍然显示在左侧。

https://jsfiddle.net/73mahbgk

代码：

<section aria-label="banner" class="banner">
    <div class="banner__container">
        <div class="banner__content">
            <p>Hello world! <a href="#" class="banner--link">Click me!</a></p>
        </div>
    </div>
</section>

body {
  margin: 0;
  padding: 0;
}

.banner {
    background-color: #000;
    color: #fff;
}

.banner .banner__container {
    max-width: 90rem;
    margin: 0 auto;
}

.banner p {
    margin: 0;
}

Answer 1

将

display: flex;

添加到 .banner，将

justify-content: center;

添加到 .banner__container。

.banner {
    display: flex;
    background-color: #000;
    color: #fff;
}

.banner__container {
    justify-content: center;
    max-width: 90rem;
    margin: 0 auto;
}