<a>と<ul>の高さをあわせたい

以下の画像の<a>と<ul>の要素を横並びにしたいのですが、<ul>の要素が大きく、<a>のmargin-topをしても下にmarginが取れません。何かいい方法はありますか？

hTML
1	<header>
2		<div class="containerTest2">
3			 <a href="" class="myname2">MIKE INGHAM DESIGN</a>
4			 <ul>
5				 <li>
6					 <span class="Item-Text2"><a href="">HOME</a></span>
7				 </li>
8				 <li>
9					 <span class="Item-Text2"><a href="">ABOUT</a></span>
10				 </li>
11				 <li>
12					 <span class="Item-Text2"><a href="">CONTACT</a></span>
13				 </li>
14			 </ul>
15			 </div>
16 </div>

CSS
1.myname2{
2  padding-top: 1rem;
3}
4.containerTest2{
5  border: solid 1px black;
6  margin-top: 3rem;
7  a{
8  text-decoration: none;
9  color: black;
10  margin-left: 2rem;
11  }
12}

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

回答1件

ベストアンサー

flexを使って横並びにするなら、下記のような感じで。

scss
1.containerTest2{
2  border: solid 1px black;
3  margin-top: 3rem;
4  display: flex;
5  justify-content: space-between; //両端揃え
6  align-items: center;  //上下位置中央配置
7  a{
8    text-decoration: none;
9    color: black;
10    margin-left: 2rem;
11  }
12  ul {
13    display: flex;
14    list-style: none;
15  }
16}