为什么当我调整窗口大小时，导航栏不显示在屏幕上？

问题描述

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

@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>

<!---->

解决方法

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

html portfolio