Why my image isn't aligned to the right of the heading in html?-CodePudding

I tried aligning my image next(right side) to my heading . With the following code. The following html code for element:

/* And Tried to Align using css */

#colorlib-logo img {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
}

#colorlib-logo h1 {
  margin-right: 3px;
  margin-left: 0px;
}

#colorlib-logo {
  width: 300px;
}

<h1 id="colorlib-logo"><a href="">HaamTheLord</a><img src="" alt="logo" /></h1>

This Code Displays the image below the heading .But I Want The Image To be Displayed To right of the text

CodePudding user response：

So you put the display flex on the image, it needs to go on the parent;

I've changed up the CSS a lot and made it simpler. I also changed the HTML markup, I made the parent tag an anchor (link) and the text is now the H1

#colorlib-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#colorlib-logo h1 {
  font-size: clamp(1rem, 4vw, 4rem);
  margin: 0 0.5rem 0 0;
}

<a href="#" id="colorlib-logo">
  <h1 href="">HaamTheLord</h1>
  <img src="" alt="logo" height="30" width="30" />
</a>

CodePudding user response：

You're applying display: flex property incorrectly.

I have made some changes to your code, please check:

#container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#colorlib-logo img {
  width: 30px;
  height: 30px;
}

#colorlib-logo h1 {
  margin-right: 3px;
  margin-left: 0px;
}

#colorlib-logo {
  width: 300px;
}

<div id="container">
  <h1 id="colorlib-logo"><a href="">HaamTheLord</a></h1>
  <img src="https://i.stack.imgur.com/11BLZ.jpg" alt="logo" />
</div>