align-itemsのflex-endを使っているのに、下のラインが揃いません

Question

前提・実現したいこと

ヘッダー要素の画像と行を揃えたいです

模写を始めているのですが、一番最初のヘッダーで、
Flexboxでalign-itemsのflex-endを使っているのに、下のラインがどうしても微妙に揃いません。

resetcssはコピペで適用しております。お問い合わせ部分のCSSは省いてます。

アドバイスいただけると嬉しいです！

　

<header>
  <div class="container">
    <div class="item1">
      <img src="images/isaralogo.png" alt="isaraロゴ" >
      <p>バンコクのノマドエンジニア育成講座</p>
    </div>
    <div class="item2">
      <a href="#">お問い合わせ / 資料請求はこちら</a>
    </div>
  </div>

</header>

@charset "utf-8";

body {
  font-family: "Hiragino Kaku Gothic Pro";
}

.container {
  max-width: 1170px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item1 {
  display: flex;
  align-items: flex-end;
}

header img {
  padding: 0;
  margin: 0;
  width: 25%;
}

header p {
  padding: 0;
  margin: 0;
  font-size: 12px;
}

Answer 1

isaraロゴの画像自体の下部に余白があるのでずれているように見えますが、要素自体の下部は揃ってます。

画像に含まれる余白分を、テキストの margin-bottom に設定すればいいでしょう。
isaraのサイトを見た感じでは 5pxぐらいでちょうど揃うようです。

.item1 p {
  margin-bottom: 5px;
}

Comments

[Kana-T]

margin-bottomを設定して揃いました！
ありがとうございました！