Css Div/class不会水平对齐

为什么我的右边距和左边距设置为自动，用于.banner徽标内容类而不是将div居中

这是我的CSS

@import 'bootstrap';

.navbar {
    border-radius: 0px;
    font-size: 16px;
    padding-left: 150px;
    padding-right: 150px;
    margin: 0px;
    background-color: white;
}

.navbar-default .navbar-nav > li > a {
    color: #f0ad4e
}

.navbar-brand {
    font-size: 22px;
}

.navbar-default .navbar-brand {
    color: #f0ad4e;
}

.banner-home {
    height: 400px;
    background-color: #f0ad4e;
    padding: 100px;
}

.banner-logo-container {
    width: 1170px;
    margin: 30px;
    border: 1px solid;
}

.banner-logo-content {
    margin-right: auto;
    margin-left: auto;
    border: 1px solid;
    font-size: 108px;
    color: white;
}

这是我的页面：

<div class="banner-home">
      <div class="col-md-12">
        <div class="banner-logo-container">  
          <span class="banner-logo-content">E!</span>
        </div>
        <div class="banner-text">
          <p>Crowdsourcing Scientific Innovation</p>
        </div>
      </div>
</div>

在CSS中为.banner徽标内容添加文本对齐：居中

---

你应该参考这篇文章来理解为什么它不起作用：

---

横幅标志内容是一个跨度，这意味着它的显示内联。您可以将文本对齐：居中放置在横幅徽标容器上，并在徽标内容栏的自动边距右侧。使用此解决方案，容器将不会调整大小，并在小屏幕上被截断。我怎样才能使它充满活力？我已经将宽度设置为100%，所以在调整大小时，框会变得动态。请注意E！在OP的代码中，代码中有一个div，为什么在我使用此解决方案调整浏览器大小时，容器不会调整大小？