縦方向に並んでいて左寄せした要素を右のコンテンツと高さを揃えたい

リスト前提・実現したいこと

floatで左寄せすると上に空白ができる
floatまたはfloat以外の方法があるなら教えて頂きたいです。

リスト発生している問題・エラーメッセージ

floatで左寄せにすると上に空白があく

該当のソースコード


HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <header>
      <div class="header-left">
        <img src="image/siteTitle.png" alt="ロゴ画像">
      </div>
      <div class="header-right">
        <p>“地域に根付いた歯科医院” デンタル クリニック</p>
        <p>03-0000-0000</p>
        <p>予約受付時間 10:00～19:30 <span>日祝 休診</span></p>
      </div>
      <div class="header-navi">
        <ul>
          <li><a href="#">
            <span class="ja">トップページ</span><br>
            <span class="eg">HOME</span>
          </a></li>
          <li><a href="#">
            <span class="ja">医院紹介</span><br>
            <span class="eg">CLINIC</span>
          </a></li>
          <li><a href="#">
            <span class="ja">診療案内</span><br>
            <span class="eg">SERVICE</span>
          </a></li>
          <li><a href="#">
            <span class="ja">院長・スタッフ紹介</span><br>
            <span class="eg">STAFF</span>
          </a></li>
          <li><a href="#">
            <span class="ja">アクセス</span><br>
            <span class="eg">ACCESS</span>
          </a></li>
        </ul>
      </div>
    </header>
  </div>
</body>
</html>

CSS

@charset "utf-8";

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* 共通 */
body {
  border-top: 8px solid #6cc;
  width: 100%;
}
.container {
  width: 920px;
  margin: 0 auto;
  padding: 0px 0 0;
  background: #F6F6F6;
  color: #515151;
  font-family: Verdana,Arial,Helvetica,'meirio','メイリオ','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4',Osaka,'ＭＳ Ｐゴシック',sans-serif;
}

/* ヘッダー */
header {
  height: 200px;
}
/* ヘッダー右 */

/* ヘッダー左 */
.header-right {
  float: right;
}

自分で調べたことや試したこと

display: flex;
flex-direction: column;
jyustify-content: flex-end;

使っているツールのバージョンなど補足情報

visual studio code

行動規範の内容に同意します

回答1件

ベストアンサー

float を使うなら、.header-left に float: left; を指定。

さらに次の要素に、clear: both; を指定してフロートを解除。

css
1.header-right {
2  float: right;
3}
4
5/* 以下追加 */
6.header-left {
7  float: left;
8}
9.header-navi {
10  clear: both;
11}

FlexBoxを使うなら、下記で。

css
1header {
2  height: 200px;
3  display: flex;
4  flex-wrap: wrap;
5}
6
7.header-right {
8  margin-left: auto;
9}
10
11.header-navi {
12  width: 100%;
13}