3つの要素を横並びにしたい

3つの要素をdisplay flexなどで、添付の画像のように並ばせることはできますか？
右の２つの要素はlistです。。
listもそれぞれが横並びなのでdisplay flexを使っています。

また、①のかたまりと、②③のかたまりを両端に寄せたいです。

よろしくお願いします

古いほうのコード↓


html


<header>
      <h1><img src="images/logo.png" alt="----" /></h1>

      <section class="header_01">
        <ul>
          <li>
            <a href="#"><img src="images/blog.png" class="sns"/></a>
          </li>
          <li>
            <a href="#"><img src="images/radio.png" class="sns"/></a>
          </li>
          <li>
            <a href="#"><img src="images/twitter.png" class="sns"/></a>
          </li>
          <li>
            <a href="#"><img src="images/youtube.png" class="sns"/></a>
          </li>
        </ul>

        <nav>
          <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="introduction_new.html">自己紹介</a></li>
            <li><a href="live.html">ライブ情報</a></li>
            <li><a href="disc.html">CD/DVD</a></li>
            <li><a href="media.html">メディア出演</a></li>
            <li><a href="contact.html">問い合わせ</a></li>
          </ul>
        </nav>
      </section>
    </header>



css


header{
    width: 960px;
    height: 99px;
    display: flex;
    margin: 0 auto;
    justify-content:space-between;　/*それぞれを両端に寄せる*/

}

header h1 {
    width: 213px;
   margin-top: 20px;
}

.sns{
    width: 20px;
    height: 20px;

}

.header_01 ul{
   display: flex;
   
}

.header_01 ul li{
    text-align: center;
}



nav{
    
}

nav ul{
    display: flex;
    
    
}

nav ul li{
    margin-left: 20px;
}

nav ul li a{
    color: #555555;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

nav ul li a:hover{
    color: #73b55e;
}



headerが、①②③をすべて囲んでいて、
section classのheader_01が②
navが③です。

新しいほうのコードを以下に載せます！！！

html
1
2
3
4
5
6<!-- headerここから-->
7    <header>
8      <h1><img src="images/logo.png" alt="----のホームページ" /></h1>
9
10      <section class="header_01">
11
12        <section class="icon">
13        <ul>
14          <li>
15            <a href="#"><img src="images/blog.png" class="sns"/></a>
16          </li>
17          <li>
18            <a href="#"><img src="images/radio.png" class="sns"/></a>
19          </li>
20          <li>
21            <a href="#"><img src="images/twitter.png" class="sns"/></a>
22          </li>
23          <li>
24            <a href="#"><img src="images/youtube.png" class="sns"/></a>
25          </li>
26        </ul>
27      </section>
28
29        <nav>
30          <ul>
31            <li><a href="index.html">ホーム</a></li>
32            <li><a href="introduction_new.html">自己紹介</a></li>
33            <li><a href="live.html">ライブ情報</a></li>
34            <li><a href="disc.html">CD/DVD</a></li>
35            <li><a href="media.html">メディア出演</a></li>
36            <li><a href="contact.html">問い合わせ</a></li>
37          </ul>
38        </nav>
39        
40      </section>
41    </header>
42    <!-- headerここまで-->
43
44
45
46CSS
47
48
49header{
50    max-width: 960px;
51    height: 99px;
52    display: flex;
53    margin: 0 auto;
54    justify-content:space-between;　/*それぞれを両端に寄せる*/
55    
56
57}
58
59header h1 {
60    width: 213px;
61    margin-top: 20px;
62}
63
64.sns{
65    width: 20px;
66    height: 20px;
67
68}
69
70.header_01{
71    margin-top: 20px;
72}
73
74.header_01 ul{
75   display: flex;
76   background-color: #73b55e;
77   
78   
79}
80
81.header_01 ul li{
82    margin: 5px;
83}
84
85
86
87.icon ul{
88    display: flex;
89}
90
91
92
93
94nav ul{
95    display: flex;
96 
97}
98
99nav ul li{
100    margin-left: 20px;
101}
102
103nav ul li a{
104    color: #555555;
105    text-decoration: none;
106    font-size: 14px;
107    font-weight: bold;
108}
109
110nav ul li a:hover{
111    color: #73b55e;
112}
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129コード