練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>company</title>
<meta name="description" content="会社の活動についてのサイト">
<link rel="stylesheet" href="https://unpkg.com/ress.min.css">
<link href="https://fonts.googleeapis.com/com/css?family=Philosopher" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header class="page-header">
<h1><a href="index.html"><img class="logo" src="images/th.jpeg" alt="会社ロゴ">
</a></h1>
<nav>
<ul class="main">
<li><a href="index.html">Home</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="fee.html">fee</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="active.html">Active</a></li>
<li><a href="mail.html">Mail</a></li>
</ul>
</nav>
</header>
</body>
</html>
@charset "utf-8";
html{
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium","ゴシック medium", YuGothic,"ヒラギノ角ゴ Pro W3",
"sans-serif";
line-height: 1.7;
color: #432;
}
a{
text-decoration: none;
}
img{
max-width: 5%;
}
.logo{
width: 5px;
margin-top: 14px;
}
.main {
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main li{
margin-left: 36px;
}
.main a{
color:#432
}
.main a:hover{
color:#0bd;
}
.page-header {
display: flex;
}