ヘッダーメニューの右寄せについて

HTML/CSSの初学者となります。
下記「index.html」と「style.css」を使用して
ヘッダーメニューを右寄せしたいのですが、「margin-left:auto;」を「main_menu」クラスに当てても
右寄せになってくれません。
ヘッダーメニューを右寄せするには、どのようにcssを記載すれば良いのでしょうか。
どなたかご教授して頂けると助かります。
よろしくお願い致します。

【index.html】

html
1</<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="css/style.css">
6  </head>
7
8  <body>
9      <header>
10        <h1 class="main_title">オンラインショップ</h2>
11          <nav>
12            <ul class="main_menu">
13              <li><a href="#">ホーム</a></li>
14              <li><a href="#">ログイン</a></li>
15              <li><a href="#">会員登録</a></li>
16            </ul>
17          </nav>
18      </header>
19
20    <div class="main">main_content</div>
21
22    <footer>fotter</footer>
23  </body>
24
25</html>
26

【style.css】

css
1body{
2  margin: 0;
3  min-height: 100vh;
4  display: flex;
5  flex-direction: column;
6}
7
8
9header{
10  height: 150px;
11}
12
13div{
14  display:flex;
15	flex: 1;
16	width: 100%;
17	margin:0 auto;
18}
19footer{
20  height:150px;
21}
22
23.main_title{
24  margin:0;
25  line-height:100px;
26  text-align:center;
27  border: 5;
28}
29ul li{
30	display: inline;
31	float:left;
32	width:18%;
33	font-weight:bold;
34	border-right:1px  solid #D84544;
35}
36
37.main_menu{
38  text-align: center;
39  margin-left:auto;
40}