我的缩放有问题。我是编码新手，不想让我的问题或帮助变得模糊，因为我不知道如何提问，所以我打了一个代码针。
在我的中，当缩放为全桌面屏幕时，名称标签将被拉到我的元素之前的页面顶部。
当我把页面减半时，它看起来很好，但我缩放css宽度的方式有问题，有人有解决方案和建议在未来避免这种情况吗？
https://codepen.io/Aspiring/pen/gOWOgvz
检查练习*{框大小：边框框；}导航{边距：0px；填充：0px；背景：学员蓝；}李{列表样式：无；float：左；}李{显示：块；文字装饰：无；列表样式：无；边距：0px；填充：0px 100px；}输入{位置：相对；左：30px；}#通过{位置：相对；左：7px；}.sub btn{位置：相对；左：135px；顶部：10px}靠边站{浮动：右侧；颜色：蓝色；文本对齐：右；边框：2 x纯蓝色；右侧填充：px；宽度：25%；利润率最高：5%；}文章{宽度：35%；浮动：右侧；填充：5px；}#联系人表格{显示：块；位置：静态；填充：20px；}<body>
<header id="introducton">
<h1>introduction</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui accusantium delectus quo laborum quis iure
dignissimos fugit quidem, rem molestiae! Provident, quidem tempora?</p>
</header>
<nav>
<h2>nav</h2>
<ul>
<li><a href="index.html">ABOUT</a></li>
<li><a href="index.html">HOME</a></li>
<li><a href="index.html">CONTACT</a></li>
</ul>
</nav>
<div class="asidebar">
<aside>
<h3>aside</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non mollitia sequi odit animi enim praesentium.
</p>
</aside>
</div>
<section>
<article>
<h4>ARTICAL 1</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis repellat nemo id vero laudantium
ad
recusandae, hic unde eius repudiandae quo quasi distinctio ex? Rem incidunt facere ducimus aspernatur
expedita!
</p>
</article>
<article>
<h5>ARTICAL 2</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor quae ipsum maiores? Excepturi ipsa
voluptate
eum modi? Explicabo saepe assumenda error in iusto minus nihil natus architecto, voluptatibus quia earum
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aspernatur illo quia! Dolores fuga illum
officiis veritatis quaerat quo harum similique nobis voluptatibus recusandae commodi, vero at eveniet
laborum ut iure, dicta dignissimos?</p>
</article>
</section>
<div id="contact">
<form action="/action_page.php" method="POST">
<label for="name">Name:</label>
<input type="name" id="name">
<br>
<label for="eMail">Email:</label>
<input type="email" id="eMail">
<br>
<label for="Pass">Password:</label>
<input type="password" id="Pass">
<br>
<label for="submit"></label>
<input class="sub-btn" type="submit" id="email">
</form>
</div>
<table>
<tr>
<th class="underline"> Contact</th>
<th class="underline"> @gmail</th>
<th class="underline"> Number</th>
</tr>
<tr>
<td>Will Mosser</td>
<td>will.mosser.32</td>
<td>434-332-2222</td>
</tr>
<tr>
<td>Page Mosser</td>
<td>ppispage</td>
<td>434-332-4343</td>
</tr>
</table>
<footer>
<h6>footer</h6>
<p>2021©Copyright</p>
</footer>
</body>
</html>
* {
box-sizing: border-box;
}
nav {
margin: 0px;
padding: 0px;
background: cadetblue;
}
nav li {
list-style: none;
float: left;
}
nav li a {
display: block;
text-decoration: none;
list-style: none;
margin: 0px;
padding: 0px 100px;
}
input {
position: relative;
left: 30px;
}
#Pass {
position: relative;
left: 7px;
}
.sub-btn {
position: relative;
left: 135px;
top: 10px
}
aside {
float: right;
color: blue;
text-align: right;
border: 2px solid blue;
padding-right: px;
width: 25%;
margin-top: 5%;
}
article {
width: 35%;
float: right;
padding: 5px;
}
#contact form {
display: block;
position: static;
padding: 20px;
}
#contact {
display: inline-flex;
}
我插入
#contact {
display: inline-flex;
}
#contact {
display: inline-block;
}