CSS alignment problems

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.


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

The Codepen im working in

  * {
   border: 1px solid red;

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

  display: inline-block;
/*    background-image: url('');  */
/*   background-position:center; */
/*   position:absolute; */
  z-index: 12;
  margin:0 auto;
  padding: 10px;
  box-shadow: inset 5px 0px 15px 5px rgba(0,0,0,.5); 

.head-intro {
  display: inline-block; 
  margin: 0 auto;
  padding: 4px;

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

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

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.

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.