为什么当我调整窗口大小时，导航栏会离开屏幕？答案

【问题标题】：Why when I resize the window the navigation bar goes out of the screen?为什么当我调整窗口大小时，导航栏会离开屏幕？
【发布时间】：2020-12-24 10:26:20
【问题描述】：

我正在尝试制作我的第一个作品集，但遇到了我无法解决的问题。我仍在尝试正确调整所有元素的大小，但导航栏是我的首要任务。事实上，每当我减小页面的宽度时，导航栏就会上升，离开屏幕。希望有人知道如何解决这个问题，在此先感谢您的帮助。这是代码。

@import url(//db.onlinewebfonts.com/c/4aa3e37e571255737e5e6d4e9d9770a5?family=Rockwell);
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*{
    margin: 0;
    padding: 0;
}
.wrapper{
    margin-left: auto;
    margin-top: auto;
    width: 100%;
}
body{
    background-color: #222326;
}
.nav-bar{
    margin-top: 100px;
    transform: translateY(-870px);
    background-color: #0C0C0D;
    width: 380px;
    padding: 18px;
    border-radius: 50px;
    margin-left: 33%;
}
.nav-bar>a{
    text-decoration: none;
    color: #3A3B40;
    padding-left: 4%;
    position: relative;
}
.nav-bar>a>h4{
    display:inline;
    font-family: 'Raleway', sans-serif;
}

.contactme-link{
    border-right: 1px solid #88898C;
    margin-left: 1%;
    margin-right: 2%;
    padding-right: 3%;
}

.skills-link{
    border-right: 1px solid #88898C;
    padding-right: 3%;
}
.myworks-link{
    margin-left: 2%;
}

.bg{
    background: url('background.jpg');
    position: relative;
    padding-right: 100%;
    padding-bottom: 66.6%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -2;
    border-radius: 0 0 70px 70px;
}

.layer{
    background-color: rgba(34,35,38,.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 0 0 70px 70px;

}

.me{
    margin-left: 25%;
    margin-top: 20px;
    transform: translateY(-870px);
}

.face{
    background: url('face-bw.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 590px;
    border-radius: 60px;
    margin-left: 75px;
    width: 475px;
}

.black-box{
    background-color: #0C0C0D;
    width: 585px;
    text-align: center;
    padding: 25px 20px 25px 20px;
    border-radius: 50px;
    margin-top: -115px;
}

.black-box>h1{
    color: #D9D9D9;
    font-family: 'Rockwell', sans-serif;
    font-size: 68px;

}
.black-box>h4{
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    color: #3A3B40;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Andrea Testini Portfolio</title>
</head>
<body>
    <div class="wrapper">
        <div class="presentation">
            <div class="bg">
                <div class="layer"></div>
            </div>
            <div class="nav-bar">
                <a href="#contact-me" class="contactme-link">
                    <h4>CONTACT ME</h4>
                </a>
                <a href="#skills" class="skills-link">
                    <h4>SKILLS</h4>
                </a>
                <a href="#my-works" class="myworks-link">
                    <h4>MY WORKS</h4>
                </a>
            </div>
            <div class="me">
                <div class="face"></div>
                <div class="black-box">
                    <h1>Andrea Testini</h1>
                    <h4>Programmer and Web Developer</h4>
                </div>
            </div>
            
        </div>
    </div>
</body>
</html>

<!---->

【问题讨论】：

实际上使用transform和padding很难管理和定位整个布局对象。尝试使用flex 或grid 布局系统，它会让你的过程变得非常简单。
我已经按照您的建议重做了一切，现在可以使用了，谢谢！
很高兴我能帮上忙。

标签： html css portfolio

【解决方案1】：

将.nav-bar 中的width: 380px; 更改为max-width: 380px;，你会没事的

【讨论】：

按CTL+F5再试一次
没什么，导航栏仍然离开屏幕。还是谢谢你。