H1 moving with image

I am trying to make a header with title in the middle with a logo on the right. But the logo is slightly above the h1 tag so I tried increasing its top margin to push it down. Even though logo came down a little but it pushed h1 tag with it even though they are sibling elements.

Html

<header>
        <h1 id = title>Personal Blog</h1>
        <img src="/images/logoo.png" alt="logo">
    </header>

CSS

header{
    background-color: black;
    color: white;
    height: 12em;
    overflow: hidden;
}
#title{
    display: inline-block;
}
header img{
    width: 100px;
    margin-top: 5px;
    display: inline-block;
}

You forgot the quotation marks " " for your id attribute’s value. The CSS id selector (#) probably is not working without the quotation marks.

That’s the only obvious error I can see, but I have only been awake for about 3 minutes.

1 Like

quotation marks are optional, still I added them and there is no change. Additionally, this only happens when display for h1 is set to inline-block.

have you tried “flexbox” on header?!

tried a bottom margin to the h1 rather?

Hello Ken,
I was able to sort this problem for you with the following code. (without using flexbox).

Inside of the HTML/CSS code I had to put them into div with classes of .column-1 and .column-2. What this will do is column-1 is set to a width of 50% of the total width of the header allowing .column-2 to occupy the other half.

<header>
  <div class="column-1">
    <h1 id="title">Personal Blog</h1>
  </div>
  <div class="column-2">
    <img src="/images/logoo.png" alt="logo">
  </div>
</header>

CSS

body {
  margin: 0 10px;
}

header {
  background-color: black;
  color: white;
  height: 12em;
  overflow: hidden;
}

.column-1, .column-2 {
  display: inline-block;
}

.column-1 {
  width: 54%;
}

.column-2 {
  width: 45%;

}

h1 {
  text-align: right;
}

img {
  margin: 15px 10px 0 0;
  float: right;
}

Hopefully this helps you,
Have a wonderful day!

1 Like