html - 如何摆脱菜单栏和侧面导航之间的空间？

Question

如何摆脱由于键入 hello.c 导致的菜单栏和侧边栏之间的空间。
我试过了
显示:内联块；和溢出:隐藏；它摆脱了以前存在的白色空间，现在用一种颜色填充它。我还尝试获取内容 div 并移动它，使其不是 .sidebar 的父级(？)，但随后“你好”最终出现在页面底部。我想将“你好”文本保持在黄色区域的中心，而侧边栏和菜单栏之间没有空格。
Picture of the website

.menucontain{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap:5px;
    color:#F2F0D0;
    text-align:center;
    background-color:#204959;
    font-family:helvetica;
    padding:15px;
  }
    .sidebar{
      background:#204959;
    width:18%;
    height:800px;
    text-align:center;
    color:#F2F0D0;
    font-family:helvetica;
    display:grid;
    grid-template-rows: repeat(6 ,50px);
    grid-gap:2px;
     }
    .side1{
    background:gray;
    padding-top:15px;
      }
   
  .content{
    background-color:#F2F0D0;
    text-align:center;
    overflow:hidden;
      }

<div class="menucontain">

  <div class="menu1">Menu1</div>
<div class="menu2">Menu2</div>
 <div class="menu3">Menu3</div>
 <div class="menu4">Menu4</div>
 <div class="menu5">Menu5</div>
<div class="menu6">Menu6</div>
  <!--menu contain div on next line-->
</div>
  
  <div class="content">
    <p>hello</p>

<div class="sidebar">
  <div class="side1">About</div>
  <div class="side1">Blog</div>
  <div class="side1">Sales</div>
  <div class="side1">Partners</div>
  <div class="side1">Portfolio</div>
  <div class="side1">Contact</div>
  </div>   
  </div>
 
  

Answer 1

这是您问题的正确解决方案。
首先，移动标签<p>依次为 侧边栏 .像这样:

...
<div class="sidebar">
        <div class="side1">About</div>
        <div class="side1">Blog</div>
        <div class="side1">Sales</div>
        <div class="side1">Partners</div>
        <div class="side1">Portfolio</div>
        <div class="side1">Contact</div>
    </div>

    <p>hello</p>
...

其次，分配 网格 .content 规则通过将其添加到您的 css 来创建类:

.content {
    display: grid;
    grid-template-columns: 18% 1fr;
}

并删除宽度规则 - width: 18%出 .sidebar选择器。因为我们将宽度定义为 18% 在上面的网格规则中。

.menucontain {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 5px;
    color: #f2f0d0;
    text-align: center;
    background-color: #204959;
    font-family: helvetica;
    padding: 15px;
}

.content {
    display: grid;
    grid-template-columns: 18% 1fr;
}

.sidebar {
    background: #204959;
    /*width: 18%;*/
    height: 800px;
    text-align: center;
    color: #f2f0d0;
    font-family: helvetica;
    display: grid;
    grid-template-rows: repeat(6, 50px);
    grid-gap: 2px;
}

.side1 {
    background: gray;
    padding-top: 15px;
}

.content {
    background-color: #f2f0d0;
    text-align: center;
    overflow: hidden;
}

<div class="menucontain">
    <div class="menu1">Menu1</div>
    <div class="menu2">Menu2</div>
    <div class="menu3">Menu3</div>
    <div class="menu4">Menu4</div>
    <div class="menu5">Menu5</div>
    <div class="menu6">Menu6</div>
    <!--menu contain div on next line-->
</div>

<div class="content">
    <div class="sidebar">
        <div class="side1">About</div>
        <div class="side1">Blog</div>
        <div class="side1">Sales</div>
        <div class="side1">Partners</div>
        <div class="side1">Portfolio</div>
        <div class="side1">Contact</div>
    </div>

    <p>hello</p>
</div>