Rewrite the title to: How do I place my logo in the upper left corner of the header?

Question

I'm designing a header for my college project where the logo should be in the top left corner. I tried using the float property in CSS but nothing happened. How do I move my logo to the upper left corner of the title bar? I tried many times but the code is not executed.

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap')

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
}

.logo {
  position: relative;
  float: left;
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
  left: 20px;
  top: 0px;
  bottom: 40px;
}

<header class="header">
  <img class="logo" src="img/pharmapp.png" alt="logo">
  <p class="p">Medcines on your Doorstep</p>
  <nav class="nav__links">
    <ul>
      <li><a href="#">Login</a></li>
      <li><a href="#">SignUp</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#" <button>Contact</button></a>
</header>

Answer 1

Just place your .logo element and p tag inside a div. It will sort automatically.

You also forgot to close the a tag around the button.

Don't use floats or absolute positioning in layouts unless you know what you are doing...

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap')

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

/* p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
} */

.logo {
/*  position: relative;
  float: left;*/
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
/*  left: 20px;
  top: 0px;
  bottom: 40px;*/
}

<header class="header">
  <div>
    <img class="logo" src="img/pharmapp.png" alt="logo">
    <p class="p">Medicines on your Doorstep</p>
  </div>
  <nav class="nav__links">
    <ul>
      <li><a href="#">Login</a></li>
      <li><a href="#">SignUp</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#"><button>Contact</button></a>
</header>

Answer 2

Your header has padding: 30px 10%, which means there will be 10% on the left and right sides of header Fill, then in .logo you set the starting position to be 20px from the left.

One way to "fix" it is to put the left of the .logo in a negative position by left: calc(-10% 20px); .

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap') * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
}

.logo {
  position: relative;
  float: left;
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
  /*you can play with the numbers here*/
  left: calc(-10% + 20px);
  top: 0px;
  bottom: 40px;
}

<header class="header">
  <img class="logo" src="img/pharmapp.png" alt="logo">
  <p class="p">Medcines on your Doorstep</p>
  <nav class="nav__links">
    <ul>
      <li><a href="#">Login</a></li>
      <li><a href="#">SignUp</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#"> <button>Contact</button></a>
</header>