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; }
Medcines on your Doorstep
Contact
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Just place your
.logoelement andptag inside a div. It will sort automatically.You also forgot to close the
atag 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;*/ }Your
headerhaspadding: 30px 10%, which means there will be10%on the left and right sides ofheaderFill, then in.logoyou set the starting position to be20pxfrom the left.One way to "fix" it is to put the
leftof the.logoin a negative position byleft: 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; }