Blog Preview Card using HTML and CSS

You can use the flexbox to layout the footer part as the following

.footer {
  display: flex;
}

.author-picture {
  width: 2em;
  height: 2em;
}

.author-name {
  margin-left: 0.857em;
}

Also you are not using the font family specified in the design file. You can do that easily using Google Fonts. Just add some link elements to the HTML file:

  <!-- Google fonts: -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
    rel="stylesheet">

Then you can reference that font in CSS like

body {
  font-family: "Figtree", sans-serif;
}