Html Can'；t在图像上显示白色div，can'；t对齐两个div

我无法对齐相邻的两个div（.sidebar和.work图像），也无法使.projects部分的白色背景显示在图像上。我希望每个部分都能达到100vh，所以这是必须的

或者，如果您不理解这一点，那么这三个占位符图像应该位于蓝色侧边栏的旁边，侧边栏和图像所包含的整个div应该具有白色背景，并且应该位于图像上方

我也把它上传到了，但我怀疑它是否会和截图上的一样好，因为没有添加响应

正文{
框大小：边框框；
}
* {
字体大小：16px；
字体系列：Questrial，无衬线；
保证金：0；
填充：0；
}
/*关于部分*/
.项目组{
高度：100vh；
}
#关于{
高度：100vh；
}
.背景{
宽度：100%；
}
.关于标题{
显示：内联；
背景色：rgba（0,0,0,0.58）；
位置：绝对位置；
利润率最高：22.5%；
左缘：65%；
颜色：白色；
宽度：25%
}
跨度#h1{
字号：5em；
}
.关于标题p{
字号：1em；
文本对齐：居中；
填充：1%；
}
/*项目组*/
.侧边栏{
背景色：#22a7f0；
文本对齐：居中；
显示：内联块；
高度：100vh；
宽度：10%；
位置：相对位置；
}
.侧边栏跨距{
字号：5em；
显示：块；
填料顶部：.8em；
}
.侧栏a：链接，
.侧边栏a:已访问{
文字装饰：无；
颜色：白色；
}
描述{
颜色：白色；
字号：1.25em；
垫面：5em；
}
/*侧边栏的末尾*/
.工作形象{
宽度：90%；
}
.项目组{
宽度：100%；
背景色：白色；
高度：100vh；
}
.工作图像{
宽度：25%；
左缘：2.5%；
保证金权利：2.5%；
显示：内联块；
}

文件夹
$（函数（）{
$（'a[href*=“#”]：不是（[href=“#”]”）。单击（函数（）{
if（location.pathname.replace（/^\/，''）==this.pathname.replace（/^\/，''）和&location.hostname==this.hostname）{
var target=$（this.hash）；
target=target.length？target:$（'[name='+this.hash.slice（1）+']'）；
if（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});
嗨<这里有一些文字
还有一些文字

我的工作

这是一种糟糕的做法，尝试使用引导。但好吧，看看这是否有帮助

#projects * {
   display:inline;
}
#siderbar * {
   display: block!important
}

---

通过将其添加到.projects.section div来修复此问题：

 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: space-between;

---

但仍然没有解决白色背景的问题。

我想在没有引导的情况下进行练习。如果它变得太难，我会在这里使用引导。建议的修复方案不起作用。