Html 右边空白处没有显示

下面是我的CSS和HTML代码。正如你所看到的，右边的边距不会出现

有人能告诉我为什么吗

HTML、CSS的结构正确吗？我必须在页面中间显示两个窗口，页脚和页眉。所以，我把一切都定位为绝对 这是正确的做法吗

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
最小高度：100vh；
最小宽度：100vh；
}
.包装纸{
位置：绝对位置；
最高：0%；
底部：0%；
左：0%；
右：0%；
背景色：#666；
溢出x：隐藏；
}
.标题{
位置：绝对位置；
保证金：0；
最高：0%；
身高：10%；
宽度：100%；
背景色：#fff；
}
.页脚{
位置：绝对位置；
底部：0%；
身高：10%；
宽度：100%；
背景色：#f7f7f7；
}
.标题.品牌标题{
}
.窗户{
位置：绝对位置；
宽度：100%；
排名前10%；
底部：10%；
背景色：#eee；
利润率：10px；
}

布局

应用宽度

计算

.window {
    background-color: #eee;
    bottom: 10%;
    margin: 10px;
    position: absolute;
    top: 10%;
    width: calc(100% - 20px); /*You apply margin:10px;*/
}

应用宽度
calc
like

.window {
    background-color: #eee;
    bottom: 10%;
    margin: 10px;
    position: absolute;
    top: 10%;
    width: calc(100% - 20px); /*You apply margin:10px;*/
}

这仅仅是因为你的宽度是100%，你应用了20像素的边距（左边边距：10，右边边距：10）=>实际上它需要100%+20像素的空间。这就是为什么你可以在你的右边找出保证金的原因

使用
宽度：计算（100%-20px）在您的.window上，它可以正常工作


*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
最小高度：100vh；
最小宽度：100vh；
}
.包装纸{
位置：绝对位置；
最高：0%；
底部：0%；
左：0%；
右：0%；
背景色：#666；
溢出x：隐藏；
}
.标题{
位置：绝对位置；
保证金：0；
最高：0%；
身高：10%；
宽度：100%；
背景色：#fff；
}
.页脚{
位置：绝对位置；
底部：0%；
身高：10%；
宽度：100%；
背景色：#f7f7f7；
}
.标题.品牌标题{
}
.窗户{
位置：绝对位置；
宽度：计算（100%-20px）；
排名前10%；
底部：10%；
背景色：#eee；
利润率：10px；
}

布局
这只是因为您的宽度为100%，并且应用了20像素的边距（左边边距：10，右边边距：10）=>实际上它需要100%+20像素的空间。这就是为什么你可以在你的右边找出保证金的原因

使用
宽度：计算（100%-20px）在您的.window上，它可以正常工作


*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
最小高度：100vh；
最小宽度：100vh；
}
.包装纸{
位置：绝对位置；
最高：0%；
底部：0%；
左：0%；
右：0%；
背景色：#666；
溢出x：隐藏；
}
.标题{
位置：绝对位置；
保证金：0；
最高：0%；
身高：10%；
宽度：100%；
背景色：#fff；
}
.页脚{
位置：绝对位置；
底部：0%；
身高：10%；
宽度：100%；
背景色：#f7f7f7；
}
.标题.品牌标题{
}
.窗户{
位置：绝对位置；
宽度：计算（100%-20px）；
排名前10%；
底部：10%；
背景色：#eee；
利润率：10px；
}

布局
在这种情况下，放一把小提琴会很有帮助。注意位置，非常小心。@Utkanos为什么？代码片段应该是首选，因为所有的代码都保留在这里。我从来没有说过，而是把代码放在问题中。有时，看到人们的目标是什么很好，因为这可能很难想象。页面布局的绝对定位通常是一个不好的主意。在这种情况下，包括小提琴会很有帮助。注意位置，非常小心。@Utkanos为什么？代码片段应该是首选，因为所有的代码都保留在这里。我从来没有说过，而是把代码放在问题中。有时候，看到人们的目标是什么很好，因为很难想象。页面布局的绝对定位通常是一个相当糟糕的主意。