我正在通过freecodecamp学习Web开发，我完成了HTML和CSS课程，并构建了一些项目，我的最后一个项目是产品登录页面。 这是网址：https://mus733.github.io/
里面的代码：https://github.com/mus733/mus733.github.io
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1000">
<title>Document</title>
</head>
<body>
<div id="container">
<header id="header">
<img id="header-img" src="https://i.imgur.com/afdoxZ5.png" alt="Mercedes Benz Logo">
<nav id="nav-bar">
<a href="#middle-content" class="nav-link"> Feature</a>
<a href="#Youtube-video" class="nav-link">How it Works </a>
<a href="#price-container" class="nav-link">Price</a>
</nav>
</header>
</div>
<div id="content">
<h1>The New S Class , feel the intelligent drive</h1>
</div>
<form id="form" action="https://www.freecodecamp.com/email-submit" >
<input id="email" type="email" placeholder="enter your email here" name="email">
<input id="submit" type="submit">
</form>
<div class="middle-content" id="middle-content">
<img class="icon" src="https://imgur.com/yQfRCem.png" alt="icon1">
<div class="text-align">We have smartphones, so why wouldn’t we expect our cars to have some intelligence themselves? With Mercedes-Benz Intelligent Drive, you’ll have access to a suite of driving assistance systems that always seem to be one step ahead of you.</div>
</div>
<div class="middle-content">
<img class="icon" src="https://imgur.com/WXnhs8Q.png" alt="icon2">
<div class="text-align">Mercedes-Benz COMAND® maps are designed to help you get to your destination by providing clear directions, as well as plenty of advance notice for upcoming turns along the way.</div>
</div>
<div class="middle-content">
<img class="icon" src="https://i.imgur.com/sdQaxdN.png" alt="icon3">
<div class="text-align">Mercedes-Benz's signature Pre-Safe technology will help warn drivers whenever there's an imminent accident. This technology will also help prepare the vehicle for the collision by tightening seatbelts, closing the sunroof and windows, and even adjust front head restraints.</div>
</div>
<div id="Youtube-video">
<iframe id="video" width="646" height="363" src="https://www.youtube.com/embed/mQLK6c5vOHM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="price-container">
<div id="price-control">
<div id="price1" class="price-css">
<div class="shadow"></div>
<div class="price-text">
<h1>$104,000</h1>
<h2>Top-notch interior</h2>
<h2>Posh, pampering seating </h2>
<h2>Supremely comfortable ride</h2>
<button>Select</button>
</div>
</div>
<div id="price2" class="price-css">
<div class="shadow"></div>
<div class="price-text">
<h1>$200,000</h1>
<h2>Massaging front seats</h2>
<h2>Proximity keyless entry</h2>
<h2>AMG S 65 coupe and cabriolet </h2>
<button>Select</button>
</div>
</div>
</div>
</div>
<div id="footer-parent">
<footer>
<ul>Privacy</ul>
<ul id="terms">Terms</ul>
<ul>Contact</ul>
</footer>
<div id="copyright">Copyright 2020, Mercedes-Benz</div>
</div>
</body>
</html>
还有我的 CSS ：
body{
background-color:#ecf0f1;
margin: 0;
font-family: roboto;
color: #1e272e;
}
h1{
color:#1e272e ;
font-weight: lighter;
font-size: 45px;
}
h2{
color:#1e272e ;
font-size: 17px;
}
header{
background-color: #2c3e50;
height: 80px;
width: auto;
display: flex;
align-items: center;
justify-content: space-between;
color:#ecf0f1 ;
position: fixed;
border-bottom: solid;
border-color: #4e9ce9;
border-width: 5px;
}
@media(max-width: 400px){
#nav-bar{
font-size: 10px;
}
}
#nav-bar{
font-size: 20px;
}
#content{
display: flex;
justify-content: center;
padding-top: 100;
}
#submit{
width: 150px;
margin: 20;
height: 30px;
font-size: 17px;
color:#1e272e ;
background-color: #f1c40f;
border-color:#ecf0f1;
border: none;
font-weight: bolder;
}
#submit:hover{
background-color:#f39c12 ;
}
form{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#email{
width: 400px;
height: 30px;
}
#header-img{
max-width: 4.5%;
height:auto;
margin-left: 20px;
}
nav{
display: flex;
float: left;
justify-items: flex-start;
margin: 140;
}
.nav-link{
margin-left: 80;
margin-right: 20;
}
.middle-content{
width: 800px;
height: auto;
display: flex;
align-items: center;
justify-content: space-around;
margin: auto;
padding-top: 50;
}
.icon{
max-width: 10%;
height: auto;
}
.text-align{
margin: 30;
}
#video{
max-width: auto;
margin: auto;
padding-top: 100;
}
#youtube-video{
display: flex;
}
.price-css{
width: 300px;
height: 350px;
background-color:#c5dff7;
border: 1px solid rgb(70, 69, 69);
border-radius: 3px;
}
#price-container{
width: 800px;
height: auto;
background-color: #ecf0f1;
margin: auto;
}
#price-control{
display: flex;
justify-content: space-around;
margin: 90;
}
#price1{
margin-right: 90;
background-color: #ecf0f1;
}
#price2{
background-color: #ecf0f1;
}
.shadow{
width: auto;
height: 50px;
background-color: #f1c40f;
border-bottom: #f1d667 solid;
}
.price-text{
text-align: center;
}
footer{
display: flex;
flex-direction: row;
justify-content: space-around;
margin: auto;
}
#copyright{
display: flex;
justify-content: center;
font-size: 12px;
font-weight: lighter;
font-style: oblique;
}
#footer-parent{
color: #ecf0f1 ;
width: 50%;
margin: auto;
height: 70px;
background-color: #2c3e50;
border-radius: 2px;
}
#terms{
margin-right: 35;
}
button{
margin-top: 30;
width: 150px;
height: 28px;
background-color: #f1c40f;
border-color:#ecf0f1;
border: none;
font-weight: bold;
font-size: 17px;
color:#1e272e ;
}
a{
text-decoration: none;
color: #ecf0f1;
display: flex;
align-items: center;
}
问题是当我将代码放入代码笔中时，页面的元素看起来元素之间没有任何空格
问题的网址：https://codepen.io/mustafa-adnan1997/pen/rNxeyyL
你能帮我知道我的问题是什么吗
问题是您没有在 CSS 代码中添加诸如px之类的单元。例如，尝试将margin: 20;更改为margin: 20px;