How do I align a logo image next to the title?

HTML-CSS
1

I have been working on my first HTML/CSS project of tribute page.
I want to get the logo which is at the top , right next to the title “K.Sivan” .
When I try to do it , the word K.Sivan itself moves to the right.
How can I do it?
And also I want the “bullet” or the “dots” appear on the <li> , which apparently is not showing up too.

This is the link to my code Project_code

2

for your list bullets you need to remove the inline-block, and for your logo you could also but the logo wrap inside the title tag and give the title a position: relative and give your logo wrap a postition: absolute something like this…

#title{
    display: flex;
    font-family: 'Marcellus SC', serif;
    font-size:3rem;
    margin:auto;
    width:100%;
    display: inline-block;
    color:#104358;
    position:relative;   
}

.logo-container{
  position: absolute;
  left:210px;
  top:20px;
  width:100px;
}

.logo{
    width:100%;
}

another way is to put a wrap around the icon and the title and use flex

.title-wrap {
  display:flex;
  justify-content:center;
  align-items:center;
}

the flex way is the best imo hope this helps :slightly_smiling_face:

3

Thanks for the reply, But I have tried my way around it myself and settled here, I’m not sure whether it’s the right method or can I do it better?
This is how I want it to look…
If there is a simpler code I would love to know.
The updated code

4

yh it looks fine if thats how you like it, i will say a few of things tho,

  1. you have a div outside the body tag which you should put inside as all elements should be inside the body tag.

  2. the text you have on your blue background is very hard to read you should change the color to white or make the background lighter.

  3. you are using a lot of display: blocks and height: auto which you dont need as they are the default so you can remove them

5

Thank you! That will help a lot

1 Like