1行に横並びにならない

前提・実現したいこと

プロゲートの実践問題に取り組んでいます。
実現したいのは、ヘッダーのロゴとリストを１行で横並びにさせたいです。

発生している問題・エラーメッセージ

どうしても、２行に表示されてしまう

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <!-- ここからHTMLを書き始めてください -->
10    <header class="headers">
11      <div class="header-logo">Progate</div>
12     <div class="header-list">   
13    <ul>
14      <li>プログラミングとは</li>
15      <li>学べるレッスン</li>
16      <li>お問い合わせ</li>
17    </ul>
18    </div>
19    
20    </header>
21  </body>
22</html>
23
24
25```CSS
26/* CSSのリセット（消さないでください） */
27html, body,
28ul, ol, li,
29h1, h2, h3, h4, h5, h6, p,
30form, input, div {
31  margin: 0;
32  padding: 0;
33}
34
35body {
36  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
37}
38
39li {
40  list-style: none;
41}
42
43/* ここからCSSを記述してください */
44.header-list ul li{
45  display: inline-block;
46  margin-left: 100px;
47}
48
49.header-logo{
50  padding:20px;
51  font-size:30px;
52
53}
54
55.headers{
56  background-color: aqua;
57}
58### 試したこと
59
60floatプロパティでロゴを左にリストを右にすると、分かれましたが、ロゴとリストの間が空きすぎてどうにも空きすぎる。
61プロゲートの学習スクロール見返しもしたのですが、欲しい情報が見つけられず・・です。
62
63### 補足情報（FW/ツールのバージョンなど）
64![見本](3f2274dea6eec410f145aeb892627a30.png)
65![現状](0269539c5ce44a10ae7d205108d2fe99.png)

kai0310

2020/05/11 22:04

解決したのでしょうか？

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

回答2件

logoとメニューの横並びでしたらfloatではなく、flexboxを使うのをおすすめします。
flexbox参考シート

横並びのマークアップについてはこのような感じで対応するかと思います。

html
1<header>
2  <div class="logo">ロゴ</div>
3  <ul>
4    <li>メニュー1</li>
5    <li>メニュー2</li>
6    <li>メニュー3</li>
7  </ul>
8</header>

css
1* {
2  margin: 0;
3  padding: 0;
4}
5header {
6  display: flex;
7}
8header ul {
9  display: flex;
10  list-style: none;
11}
12header ul li + li {
13  margin-left: 10px;
14}