Html 固定图像带有一个"；“边界”；围绕

嘿，今天我试着编写一个登录页，但是我被卡住了。我试着用60像素的“边框”放置一幅全屏图像。现在，我想有导航栏在顶部和一些垂直文字左右的图像。（导航栏和“边框”中的垂直文本）。我该怎么做

我已经知道这不是正确的方法

.fullscreen-img {
    background-image: url(../img1);
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-repeat: no-repeat;
    border: 50px solid white;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

---

像这样？还是希望左侧和右侧文本列一直延伸到页眉/导航上方的顶部

main{
显示器：flex；
}
左边
.对{
显示器：flex；
证明内容：中心；
填充物：5px；
背景色：番茄；
}
.中{
弹性：0180%；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
填充：10px；
背景颜色：黄色；
}
.英雄容器{
显示器：flex；
高度：100vh；
宽度：100%；
背景颜色：蓝色；
}
.英雄{
弹性：0180%；
填充：10px；
}

左文本hi

链接1
链接2
链接3
这里的大形象
页脚

Dat右文本

出现了什么问题？我们也能看到你的HTML吗？A你所拥有的一切都会很有帮助的。很好，这就是我要找的。是的，左侧和右侧文本列必须一直延伸到标题/nav上方的顶部。对于顶部的“边框”部分，我重复了与顶部类似的过程？现在就查看它谢谢！对不起，我的意思是底部的“边框”部分，我必须像顶部一样重复这个过程？是的，你可以在中间添加一个页脚，或者你想添加多少部分就添加多少部分。我编辑答案