Header Alignment Struggles HTML & CSS

Been struggling for hours trying to figure this out but I at least have all of the parts looking the way that i want them.

I am trying to align a logo (currently in the right spot on the page), the nav bar (currently centered but not on the same line), and a button (currently floated right with margin on another line) aligned to act as the header. No matter how i manipulate it, i cant seem to get them on the same line looking like they are supposed to.

Here is my HTML code:

/* Globals */

* {
  font-family: 'Chronica';
}


/* Elements */

.header {
  width: 100%;
  overflow: hidden;
}

.nav ul {
  list-style-type: none;
  text-align: center;
}

.nav ul li {
  display: inline;
}

.nav ul li a {
  text-decoration: none;
  color: black;
  padding-left: 50px;
  padding-right: 50px;
  transition: 0.3s;
}

.nav ul li a:hover {
  color: gray;
}

img {
  width: 83px;
  margin-left: 30px;
}

#btn {
  background-color: #ff0000;
  border: none;
  border-radius: 5px;
  padding-left: 22px;
  padding-right: 23px;
  padding-top: 12px;
  padding-bottom: 12px;
  float: right;
  margin-right: 30px;
  transition: 0.2s;
  cursor: pointer;
  font-size: 16px;
}

#btn a {
  text-decoration: none;
  color: white;
}

#btn:hover {
  border-radius: 15px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <div class="header">
    <p>
      <a href="https://www.deliberatemedia.com/">
        <img src="Images/dm logo.png" class="logo" /></a>
    </p>
    <nav class="nav">
      <ul>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PRICING</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
    <button id="btn">
        <a href="https://www.deliberatemedia.com/schedule-a-meeting"
          >GET STARTED</a
        >
      </button>
  </div>
</body>

</html>

What i am trying to create is the header on my existing website (trying to create it from scratch to learn the coding and shortcuts in HTML and CSS).

Have been scrolling through stack overflow as well as w3schools trying out various different options and trying to optimize if for the look i was trying to achieve on my existing site and have come up empty.

Gone through like 10 iterations at this point and nothing is working but this is as close as i've gotten.

Solution

To achieve what you want you need to use flex or grid, here I use flex to solve your problem:

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}