Blog Preview Card

Hey ! Great Work out there you mention that the avatar image is not horizontally aligned with the text and upon checking on the code i see that you use vertical-align : middle which is correct but missing one css properties which is the display : inline-block even the <img/> tag is inline element it behave like block element because of its width and height , so by applying the display : inline-block you can achieved horizontally aligned the image . that's all happy coding !

alternative to display : inline-block is you can also use the flex-box you can explore it and see its magic :)

img {
  width: 11%;
  vertical-align: middle;
  padding-right: 10px; you can remove this
  display: inline-block; add this
  margin-right: 0.3rem; you can adjust this 
}

#name {
  font-weight: 800;
  vertical-align: middle; // add this
}

All in all everything looks good. I feel you on the sizing of margins and what not, I too encounter those same issues. But you found a solution which means you're learning so congratulations on your success.