I'm having issues with my scaling. I am new to coding and and don't want to have my question or help needed to be something vague do to a vague question of me not knowing how to ask the question so I put a code pin.
In my the Name label will be pulled to the top of my page before my elements when scaling for a full desktop screen.
when i put the page by half it looks fine but something is wrong with how i scaled my css width or something, anyone have a solution and advice to avoid this in the Future?
https://codepen.io/Aspiring/pen/gOWOgvz
Checking Practice * { 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; }<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>