Html 未对齐CSS布局-具有固定中心的3列布局

我是css新手，我正在尝试创建一个3列布局。也应该有一个居中的页脚。 页面的总高度应填充当前屏幕。宽度好像变宽了

目前，页脚似乎在尺寸和位置上都未对齐

感谢你的指点

.container{
显示器：flex；
弯曲方向：行；
宽度：100vw；
高度：100vh；
}
身体{
保证金：0；
字体系列：“Ubuntu”，无衬线；
}
.左{
背景色：gainsboro；
宽度：20%；
}
.中心{
背景色：白色；
宽度：60%；
}
.对{
背景色：gainsboro；
宽度：20%；
}
.页脚{
高度：20px；
左缘：20%；
保证金权利：20%；
文本对齐：居中；
宽度：60%；
背景色：红色；
}

呜呜呜呜呜呜呜呜
这是一个页脚！

如果需要将页脚放在中柱底部，请将其放在中柱内部。使用

.center中的
显示：flex
，您可以使用
页脚中的
页边距顶部：auto
将其推到底部


.container{
显示器：flex；
弯曲方向：行；
宽度：100vw；
高度：100vh；
}
身体{
保证金：0；
字体系列：“Ubuntu”，无衬线；
}
.左{
背景色：gainsboro；
宽度：20%；
}
.中心{
显示器：flex；
弯曲方向：立柱；
背景色：白色；
宽度：60%；
}
.对{
背景色：gainsboro；
宽度：20%；
}
.页脚{
宽度：100%；
高度：20px；
页边顶部：自动；
文本对齐：居中；
背景色：红色；
}

呜呜呜呜呜呜呜呜
这是一个页脚！