css - header 应该从 Bootstrap 容器中泄漏出来

Question

我需要创建一个应该存在于容器内的 header (使用 bootstrap 4+ 风格化)，但在我的例子中， header 应该从右侧的容器中泄漏出来，如下图所示:

我不知道我的逻辑是否正确，但由于菜单和内容项应该在容器内(在 1920 像素的屏幕上有 1170 像素)，标题可能应该是，还是不是？

即使您查看页眉，它也有一个应该留在容器内的图标。在那种情况下，出来的只是背景，因为容器之外什么都不存在。

html,
body {
  background: #afaf71;
}

.myHeader {
  width: 100%;
  height: 71px;
}

.container-header {
  border: 2px solid blue;
  background: red;
  height: 71px;
  text-align: right;
  line-height: 71px;
}

<header class="myHeader">
  <div class="container container-header">
    <img src="https://banner2.kisspng.com/20180828/sxw/kisspng-clip-art-computer-icons-user-download-chamber-of-d-talonpaw-svg-png-icon-free-download-175238-on-5b84c95a116717.2809616615354289540713.jpg" width="22" />
  </div>
</header>

这是我的测试代码:https://jsfiddle.net/sy86vtcp/3/

我该如何解决这个问题？如果我的逻辑有误，最好的方法是什么？

Answer 1

如果您使用的是 Bootstrap ，为什么不将标题设为 .row，然后将菜单 + 内容分别设为 col-sm-4 和 col-md-8？

<div class="header row"> Header </div>

<div class="container">

  <div class="col-sm-4">Menu</div>
  
  <div class="col-sm-8">Content</div>
  
</div>