I want to keep the name bob in the top left corner and the nav bar in the top right corner. For the div, I want it to be in the middle of the page. I'm having trouble understanding why the name and nav are moving along with the div and aligning with the text "send a message". I removed all padding except the top padding on the text "send a message", so I'm having trouble understanding whats causing the name and nav to align with the text. Here is my code:
/* ENTIRE BODY */
body {
font-family: 'Raleway', sans-serif;
font-weight: 400px;
font-size: 20px;
background-image: url("/images/background.png");
background-repeat: no-repeat;
}
#name {
float: left;
font-family: 'Merriweather Sans';
font-size: 25px;
text-align: center;
padding-left: 30px;
font-weight: 0px;
}
nav {
float: right;
padding-right: 30px;
font-size: 20px;
}
nav ul {
list-style: none;
padding-top: 10px;
}
nav ul li {
display: inline-block;
margin-right: 5px;
}
#contactcontainer {
background-color: #f2f2f2;
height: 480px;
width: 550px;
border-radius: 10px;
margin: 100px auto;
justify-content: center;
}
#sendmessage {
font-family: 'Merriweather Sans', sans-serif;
font-size: 25px;
text-align: center;
padding-top: 30px;
}<html>
<head>
<title>Contact</title>
<!-- FONT FOR NAV BAR -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;300&display=swap" rel="stylesheet">
<!-- FONT FOR MESSAGE BOX -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/contact.css">
</head>
<body>
<p id="name">bob </p>
<nav class="navbar">
<ul>
<a href="about.html">
<li>ABOUT</li>
</a>
<a href="contact.html">
<li>CONTACT</li>
</a>
<a href="projects.html">
<li>PROJECTS</li>
</a>
</ul>
</nav>
<div id="contactcontainer">
<p id="sendmessage">SEND A MESSAGE</p>
</div>
</body>
</html>