Html 动态填充尽可能多的宽度

我在左边有一个固定菜单栏。在右边我有一个部分。支持该区域填充视口宽度减去固定菜单栏宽度和区域本身的边距和填充的100%。 现在，我还试图将这一部分的图像居中，这是你可以在小提琴中看到的黑线。支持在蓝色区域（截面）居中

问题

这一部分太宽了，你可以通过图像没有居中而是向右移动一点来看到

注意： 不能滚动x轴

代码->

html，
身体{
边框大小：边框框；
字体系列：“Dosis”、“Arial”、“Serif”；
文字装饰：无；
字体大小：20px；
左边距：10px；
填充：0；
身高：100%；
宽度：100%；
}
.导航栏菜单{
z指数：100；
位置：固定；
宽度：15vw；
身高：100%；
颜色：#000；
边际上限：4vh；
}
.导航栏菜单{
左侧填充：0；
}
.导航栏菜单ul li{
显示：块；
宽度：140px；
字体大小：22px；
填充：4px 0 4px 10px；
边缘顶部：20px；
}
p{
宽度：250px；
}
分区内容{
/*左边距：-140px*/
左边距：160像素；
右边距：160px；
高度：200px；
}
部分{
宽度：100%；
颜色：#000；
显示：块；
位置：绝对位置；
顶部：35px；
背景：浅蓝色；
过渡：不透明度0.9s线性；
-webkit过渡：不透明度0.9秒易入易出；
-moz过渡：不透明度0.9秒缓进缓出；
}
第#节家庭img{
宽度：250px；
显示：块；
边距：0自动0自动；
边界半径：76px 171px 87px 171px；
-moz边界半径：76px 171px 87px 171px；
-webkit边界半径：76px 171px 87px 171px；
边框：5px实心#000000；
-网络工具包盒阴影：0px 0px 202px 0px rgba（0,0,0,0.49）；
-moz盒阴影：0px 0px 202px 0px rgba（0,0,0,0.49）；
盒影：0px 0px 202px 0px rgba（0,0,0,0.49）；
}

主页
投资组合
费迪盖德
erfaring
空袭米格

asdfr asdfian

由于您对左侧边栏使用的是

位置：固定的
，请对父项使用相同的
填充。因此，不要让内容同时具有
左边距
和
右边距
，而是让内容保持全宽，而不具有
右边距


html，
身体{
边框大小：边框框；
字体系列：“Dosis”、“Arial”、“Serif”；
文字装饰：无；
字体大小：20px；
左边距：10px；
填充：0 15vw；/*将其更改为导航栏宽度*/
身高：100%；
宽度：100%；
边距：0；/*添加此边距*/
框大小：边框框；/*添加此项*/
}
.导航栏菜单{
z指数：100；
位置：固定；
宽度：15vw；
身高：100%；
颜色：#000；
左：0；/*添加此项*/
边际上限：4vh；
}
.导航栏菜单{
左侧填充：0；
}
.导航栏菜单ul li{
显示：块；
宽度：100%；
字体大小：22px；
填充：4px 0 4px 10px；
边缘顶部：20px；
}
p{
宽度：250px；
}
分区内容{
/*把这些拿走。
左边距：160像素；
右边距：160px；
*/
高度：200px；
}
部分{
/*宽度：100%；移除*/
颜色：#000；
显示：块；
/*位置：绝对；移除*/
页边距顶部：35px；/*更换*/
背景：浅蓝色；
过渡：不透明度0.9s线性；
-webkit过渡：不透明度0.9秒易入易出；
-moz过渡：不透明度0.9秒缓进缓出；
}
第#节家庭img{
宽度：250px；
显示：块；
边距：0自动0自动；
边界半径：76px 171px 87px 171px；
-moz边界半径：76px 171px 87px 171px；
-webkit边界半径：76px 171px 87px 171px；
边框：5px实心#000000；
-网络工具包盒阴影：0px 0px 202px 0px rgba（0,0,0,0.49）；
-moz盒阴影：0px 0px 202px 0px rgba（0,0,0,0.49）；
盒影：0px 0px 202px 0px rgba（0,0,0,0.49）；
}


主页
投资组合
费迪盖德
erfaring
空袭米格

asdfr asdfian

由于您的
.navbar菜单
具有
位置：已修复
它将被所有其他元素忽略

但是，由于它具有固定的宽度，您可以使用
calc
轻松解决问题，如下所示：

section {
    width: calc(100% - 15vw);
}

请注意，您还需要删除部分的页边距，以使其不超过该页边距。
请使用SO代码片段，而不是外部链接。这些很可能会中断，特别是当你修复你的问题时。对不起什么？还有一些特殊的代码片段，你可以在其中放入html、css和js。在编辑器中，只需单击图像图标旁边的
-图标或按
Ctrl+M
@Bjango查看我的答案。看看这是否合适。它仍然没有像预期的那样工作，有点重叠。您应该无法滚动x-axis@Bjango我刚刚纠正了它。这是因为宽度：100%
。现在检查。不要使用
calc
。最好避免使用它，因为并非所有浏览器都完全支持它，而且它存在一些严重的性能问题。@praveenkumar Idk关于性能，但它得到了很好的支持：哈哈。。。对于这样一件简单的事情，我不会使用
calc
。对于重画来说，它绝对是性能密集型的。