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>
Just place your
.logo
element andp
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...
Your
header
haspadding: 30px 10%
, which means there will be10%
on the left and right sides ofheader
Fill, then in.logo
you set the starting position to be20px
from the left.One way to "fix" it is to put the
left
of the.logo
in a negative position byleft: calc(-10% 20px);
.