Html 努力在页面周围定位div

我已经为此工作了好几天，感觉我已经尝试了一切。我不确定是我错过了一些小东西，还是我完全偏离了轨道。我需要在页面上定位我的div，如图所示。到目前为止，我得到的代码是这样的

HTML:

正文{
边际：0px；
填充：0px；
宽度：1024px；
高度：768px；
浮动：左；
}
.pagebanner{
高度：200px；
宽度：1024px；
}
.标题{
背景色：浅绿色；
高度：50px；
边际上限：0px；
左侧填充：200px
}
navbar先生{
背景颜色：棕色；
浮动：左；
高度：768px；
}
.副标题{
背景色：黄绿色；
左侧填充：420px；
边际上限：0px
}
.内容{
背景颜色：深红色；
高度：
}
.页脚{
背景色：暗绿色；
填充：20px；
边际下限：0px
}

俱乐部场地




俱乐部场地
会员价格
废话废话

在本示例中，我尝试向您介绍，bootstrap可以帮助您以较少的时间制作大量html模板，请尝试阅读此框架的文档，您将发现它是多么简单

祝你好运，在你问一些关于它的问题之前， 我相信你的问题会得到解决

此示例基于Bootstrap4框架

.nav{
背景色：#ccc；
最小高度：500px；
}
.标题{
背景色：#eee；
}
.副标题{
背景颜色：黄色；
边缘底部：15px；
}
.项目{
边框：实心1px#ccc；
文本对齐：居中；
高度：150像素；
边缘底部：15px；
}

俱乐部场地
标题
导航
俱乐部场地
副标题
项目1
项目2
项目3
项目4
项目5
项目6

标题
导航
页脚
* {
框大小：边框框；
}
身体{
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
保证金：0；
}
#主要{
显示器：flex；
弹性：1；
}
#主要>文章{
弹性：1；
顺序：1；
}
#主>导航，
#主>旁边{
弹性：0.20vw；
}
#主>导航{
背景：#D7E8D4；
顺序：3；
}
页眉、页脚{
背景：黄绿色；
高度：20vh；
}
页眉、页脚、文章、导航、旁白{
填充：1em；
}
.我的集装箱{
显示器：flex；
柔性流：行换行；
对齐内容：flex start；/*将包装线打包到顶部*/
宽度：100%；
高度：300px；
}
.形象{
弹性：0.30%；
保证金：5px；
}
img{在这里输入代码
最大宽度：100%；
}

注意：尝试学习，而不是复制并粘贴它，开始尝试再次编写代码

我在代码中更改并添加了一些css类，所以请注意旧版本和新版本css和html文件之间的差异

说明：要开始建模，您需要将所有需要的部分分开；例如，我们需要：

标题

标题>图像

主>导航

主要>内容

主>内容>标题

主要>内容>副标题

主要>内容>区域

主要>内容>区域>项目

主要>内容>区域>项目>项目

等等

然后开始html，插入您的div或您想要的内容，最后一步是使用css管理它们

正文{
边际：0px；
填充：0px；
}
.mainwrapper{
宽度：1024px；
保证金：0自动；
}
.pagebanner{
高度：250px；
保证金：0；
}
.pagebanner img{
宽度：100%；
身高：100%；
}
梅因先生{
保证金：0；
}
navbar先生{
背景颜色：棕色；
最小高度：500px；
宽度：20%；
浮动：左；
}
李国宝先生{
列表样式：无；
边缘底部：15px；
}
纳瓦尔先生{
颜色：#fff；
字体大小：20px；
}
.内容{
宽度：80%；
浮动：左；
填充：0；
最小高度：500px；
}
.标题{
背景色：#000；
文本对齐：居中；
}
.标题h1{
颜色：#fff；
保证金：0；
}
.副标题{
背景色：#f8d631；
文本对齐：居中；
}
.第h2子目{
背景色：#f8d631；
保证金：0；
}
.h3区{
保证金：0；
文本对齐：居中；
}
.项目{
宽度：33.33333%；
浮动：左；
文本对齐：居中；
}
.项目部{
填充：0 15px；
}
.项目img{
高度：150像素；
宽度：100%；
}
.页脚{
背景色：暗绿色；
}

俱乐部场地
会员价格
折扣商品
名称-%200
名称-%200
名称-%200
<header>Header</header>
<div id="main">
  <article>
    <div class="my-container">
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
    </div>

  </article>
  <nav>Nav</nav>
</div>
<footer>Footer</footer>
<style>
  * {
    box-sizing: border-box; 
  }
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
  }
  #main {
    display: flex;
    flex: 1;
  }
  #main > article {
    flex: 1;
    order: 1;
  }
  #main > nav, 
  #main > aside {
    flex: 0 0 20vw;
  }
  #main > nav {
    background: #D7E8D4;
    order: 3;
  }

  header, footer {
    background: yellowgreen;
    height: 20vh;
  }
  header, footer, article, nav, aside {
    padding: 1em;
  }

  .my-container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start; /* pack wrapping lines to the top */
  width: 100%;
  height: 300px;
}

.image {
  flex: 0 0 30%;
  margin: 5px;
}

img {enter code here
  max-width: 100%;
}
</style>