如何获得我网站首页的正确位置？

Question

第一张图片是我想要我的网站的样子。所以标题位于标题元素的中间。标题周围有黑色边框。 在页眉和标题下方，我想要一张图片，周围也有黑色边框。 然后在中间我想要搜索栏，周围同样有黑色边框。 然后在其下面，我想要一个部分来展示您可以从该网站获得什么。 但第二张照片是我到目前为止所得到的。我真的很困惑，甚至无法正确理解标题和标题。 如果有人可以帮助我，一点点也可以，那就太好了！

body {
  margin: 0;
  font-family: Cambria;
  height: 757.58px;
  width: 1100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header-container {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 20px 0;
  font-size: 28px;
  position: relative;
  top: 5px
}

.header {
  text-align: center;
  position: absolute;
  top: 0px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

nav ul li {
  margin: 0 10px;
  position: relative;
  top: 0px;
}

nav ul li a {
  text-decoration: none;
  color: #91CDB7;
  position: relative;
  top: 0px;
}

.main-content {
  margin: 0 20px;
  text-align: center;
  position: relative;
  top: -10px;
}

.main-content span {
  display: inline-block;
  width: 388px;
  height: 93px;
  border: 2px solid black;
  padding: 10px;
  color: #91CDB7;
  font-size: 58px;
  line-height: 73px;
  position: relative;
  top: 0px;
  left: 100px;
}

.header-container:nth-child(1) {
  justify-content: flex-start;
  position: relative;
  left: 10px;
  top: 10px
  /* Eerste header-container links uitlijnen */
}

.header-container:nth-child(2) {
  justify-content: flex-end;
  position: relative;
  right: 10px;
  top: 10px;
  /* Tweede header-container rechts uitlijnen */
}

<div class="header-container">
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Recepten</a></li>
        <li><a href="#">Muziek</a></li>
      </ul>
    </nav>
  </header>
</div>
<div class="header-container">
  <header>
    <nav>
      <ul>
        <li><a href="#">Wedstrijden</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </nav>
  </header>
</div>
<div class="main-content">
  <span>Music Bakery</span>
</div>

这是我到目前为止得到的代码。我希望这能够解决标题和标题的问题，但遗憾的是事实并非如此。

Answer 1

我有点困惑为什么你在这部分使用 Flex。该内容将自动位于一列中，因此本质上您设置了一个弹性框，然后必须将其更改回一列。

还有一个问题，我没有看到你的标题图片，你说它渲染错误了？