divクラスの高さや幅を親クラスに揃えられません

前提・実現したいこと

divクラスの高さを親クラスに揃えたい。

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

高さがそろわず、レイアウトが歪になっている。
bar2クラスの高さをheader-luvの高さに揃えられない。
box-sizingプロパティは、親要素のwidth、heightを指定すれば、適用されると書かれてましたが、
うまくいかずに、隙間できてしまう事が多いです。

該当のソースコード

<html>
  <div class="header-lav">
<div class="matome">

　　<ul class="bar2">
　<li><a href="#">総合トップ</a></li>
　<li><a href="#">サポート</a></li>
　<li class="search"><a href="#">商品を探す</a></li>
    </ul>
</div> </div>

<css>
.header-lav { background: #002b98;
display: flex;
width: 100%;
padding: 16px;
}

.matome { display: flex;
justify-content: space-between;
width: 100%;}

.bar2 { display: flex; font-size: 0.725em; font-weight: bolder;
 width: 30%; justify-content: space-around;
height: 100%; margin:0; padding-left: 20px; padding-top: 16px;   }

li { list-style: none; width: 33%; height: 100%;}

a { color: #fff; text-decoration: none; height: 100%; display: block;}
li a:hover { color: orange;}

試したこと

box-sizing や　width heightを％指定など。　paddingを消したり。

kei344

2020/07/14 14:23

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2020/07/14 14:36

https://jsfiddle.net/gpt61kem/ 提示のコードについて、どの要素をどうしたいのかを、もっと具体的に記述することをお勧めします。

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

回答1件

単にパディングを上(と左)だけに取ってるからなのでは。

CSS
1.bar2 {
2  box-sizing: border-box;
3  display: flex;
4  font-size: 0.725em;
5  font-weight: bolder;
6  width: 30%;
7  justify-content: space-around;
8  height: 100%;
9  margin:0;
10  padding: 16px 20px;
11  /* padding-left: 20px; */
12  /* padding-top: 16px; */
13  border: yellow solid 1px; /* 確認用 */
14}