Flaskでのアプリ開発で、CSSを使ってロゴを左・メニューを右に表示したい

###できないこと
今htmlとcssを用いたアプリ開発に取り組んでいます。ヘッダーを作っていますが、ロゴを左寄せに、メニューを右寄せにして表示したいと思っています。しかし今のコードだと確かに左寄せと右寄せにはなるのですが、メニューが一段下がって表示されてしまいます。
###現在のコード
本当はCSSを別のファイルに書くのが良いとわかってはいるのですがどうしてもできなかったため、規模が小さいのもあり直接htmlに書くことにしました。なのでみにくいです。しかも色々装飾してあって、その後にいじったらこうなってしまいました。多分、ロゴの上に余白がなかったのでそこをclassで囲んで余白を指定した後だったと思います。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <link rel="preconnect" href="https://fonts.googleapis.com">
5        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
6        <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@400;700&display=swap" rel="stylesheet">
7        <style>
8            body{
9                margin: 0;
10                padding :0;
11                background-color:#ffffff;
12                color: #333333;
13                font-size: 15px;
14                line-height: 2;
15            }
16            p,h1,h2,h3,h4,h5,h6{
17                margin-top: 0;
18            }
19            img{
20                vertical-align: bottom;
21            }
22            ul{
23                margin: 0;
24                padding: 0;
25            }
26            a{
27                color: #ffffff;
28                text-decoration: none;
29            }
30            a:hover{
31                color: #ffffff;
32                text-decoration: underline;
33            }
34            header{
35                width: 100%;
36                height: 100px;
37                margin: 0 auto;
38				background-color:#009094
39            }
40            * {
41             margin: 0;
42             padding: 0; 
43            }
44            ul {
45              list-style:none;
46            }
47            div {
48              padding: 0 30px;
49            }
50            .header__float {
51              overflow: hidden;
52              clear: both;
53			  margin:auto;
54			  width:960px;
55            line-height: 48px;
56            }
57            .header__float h1 {
58              float: left;
59            }
60			.logo{
61				margin-top:20px;
62				float: left;
63			}
64            .header__float nav {
65              float: right;
66            }
67            .header__float nav ul li{
68                float: left;
69                margin: 0 20px;
70                font-size:20px;
71                font-family: 'Bitter', serif;
72            }
73			.header_float nav ul li a:hover{
74				border-bottom: 2px solid #ffffff;
75				padding-bottom: 3px;
76				text-decoration: none;
77			}
78            #wrap{
79                clear: both;
80            }
81            .content{
82                width: 960px;
83                margin: 0 auto;
84            }
85			#index h1{
86				font-size: 100px;
87				line-height: 1;
88				color: #ffffff;
89				font-family: 'Bitter' , serif;
90				margin-bottom: 50px;
91			}
92			#index .content{
93				margin-top: 150px;
94			}
95			#index p{
96				font-size: 16px;
97				color: #ffffff;
98			}
99			.btn a{
100				background-color: #009cd3;
101				color: #ffffff;
102				font-size: 20px;
103				font-family: 'Bitter' , serif;
104				width: 185px;
105				display: block;
106				text-align: center;
107				line-height: 50px;
108				margin-top: 20px;
109				border-radius: 5px;
110				border: 3px solid #009cd3;
111			}
112			.btn a:hover{
113				text-decoration: none;
114				background-color: #ffffff;
115				color: #009cd3;
116			}
117			#index{
118				background-image: url(static/images/photo_pointe_processed.jpg);
119				background-repeat: no-repeat;
120				background-position: center center;
121				background-attachment: fixed;
122				background-size: cover;
123			}
124        </style> 
125        <meta charset="UTF-8">
126        <title>ポワント診断サイト「POINTOPTION」</title>
127    </head>
128    <body id="index">
129		<header>
130            <div class="header__float">
131				<div class="logo">
132					<a href="index.html">
133                    <img src="static/images/pointoption_logo.png" alt="ロゴ" width=25% height=25%>
134                </a>
135				</div>
136                <nav>
137                    <ul>
138                        <a href="measurement"><li>Measurement</li></a>
139                        <a href="calc"><li>Diagnosis</li></a>
140                        <a href="about"><li>About</li></a>
141                        <a href="contact"><li>Contact</li></a>
142                      </ul>
143                </nav>
144            </div>
145        </header>
146        
147        <div id="wrap">
148            <div class="content">
149				<h1>POINTOPTIONへ<br>ようこそ！</h1>
150				<p>このサイトでは足の測定・それをもとにぴったりのトウシューズをおすすめいたします。<br>お気軽にどうぞ！</p>
151				<p class="btn">
152					<a href="measurement.html">足の測定へ</a>
153				</p>
154            </div>
155        </div>
156        <footer>
157            <small>(C)2021 studio.</small>
158        </footer>
159    </body>
160</html>
161