CSS alignment problems

HTML-CSS
1

This is a snippet from a react component Im struggling with.

I want the profile img placeholder, and the div next to it, containing an a attached to an H1 and H2, to align to the top.

Right now, they align to neither top, bottom, middle or anything. and I can’t seem to get it right.
The head-intro div, just randomly starts ~120px below the top and I cant figure it out.

Halp!

I have borders on everything, so I can see without using dev tools.

The Codepen im working in

<style>
  * {
   border: 1px solid red;
}

.header {
  display: block; 
  margin: 0 auto;
  text-align: center;
}

.profileimg{
  display: inline-block;
  border-radius:50%;
  height:150px;
  width:150px;
/*    background-image: url('');  */
/*   background-position:center; */
/*   position:absolute; */
  z-index: 12;
  margin:0 auto;
  margin-top:0px;
  padding: 10px;
  box-shadow: inset 5px 0px 15px 5px rgba(0,0,0,.5); 
 
}  

.head-intro {
  display: inline-block; 
  margin: 0 auto;
  padding: 4px;
 
  }
</style>

<div class="header">
      <div class="profileimg">
      </div>
      <div class="head-intro">
          <h1> <a href="https://www.facebook.com/ThomasOfAurelius">Thomas Aurelius</a></h1>
          <h2>Subtitle</h2>
      </div>
   </div>
2

Your problem is that you wrapped your h1 tag around your a tag.
Try wrapping your a tag around your h1 tag.

3

hmm. I fixed that, and the head-intro box is still not aligned.

Ive adjust margin and padding- but above the head-intro box, there is no margin, there seems to be nothing between the top of the page, and the top of head-intro- which is ~100px down.

I think I’ll scrap this header and start again.

4

You can add vertical-align: top; to .head-intro.

Using inline-block for layout can get a little janky and there are a few things to look out for (like white space etc.). I would suggest using flexbox for this instead.

I don’t know the exact layout you are going for but this is just a quick example, you can fork it and let me know when you are done with it so I can delete my pen.
https://codepen.io/lasjorg/pen/ExYmWad