文字が横並びにならない

写真の通り文字を二枚目の写真のように右に寄せ横並びにしたいのですが動いてくれません。更になぜか予想月収だけ右に寄ってしまいます。なぜなのでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" type="text/css" href="test.css">
8   	
9<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
10    <title>模写1</title>
11    
12</head>
13<body>
14
15            <!--##############header##################-->
16    <div class="head">
17
18            <a href="#">
19            <img class="logo" src="logo.jpeg" a href="#" height="30px " width="30px ">
20            </a>
21            <ul>
22            <li class="month">予想月収</li>
23            <li><h4>¥151,550</h4></li>
24            <li><a class="b2" href="#">はじめる</a></li></ul>
25    </div>
26

CSS
1/****************************
2header
3****************************/
4.logo{margin:25px 30px 0px 30px;}
5.head ul{list-style: none;}
6.head .b2{border: 1px solid orangered;
7        color: white; 
8        background-color: orangered; 
9        border-radius: 6px;
10        padding: 6px 14px 6px 12px;
11        text-decoration: none;}
12.head a:hover{text-decoration: none; color: white;}

hatena19

2020/02/21 09:46

写真は１枚しかないですが。

RYO.K

2020/02/21 10:05

追加しました！

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

回答1件

ベストアンサー

過去の下記の質問と同内容に思えますが、ちがうのですか。

HTML - 画像、テキストが左寄せ右寄せできない｜teratail

BootStrapを使わずに実現したいとかですか。

その通りです。BootStrapを使わずに実現したいです。

横並びはflexを使うといいでしょう。
右寄せは、margin-left: auto;を付加します。
垂直位置の中央寄せはalign-items: center;です。

css
1.head {
2  display: flex;
3  align-items: center;
4}
5.head ul{
6  list-style: none;
7  display: flex;
8  align-items: center;
9  margin-left: auto;
10}
11
12.head>ul>li{
13  margin-right: 10px;
14}