ヘッダーのロゴ・リストを横並びにしたい

前提・実現したいこと

ヘッダーのロゴ（img）横にリスト（li）を表示したい
参考サイト：UUUM（https://www.uuum.jp/creator/）

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

ロゴの１行下にリストが表示される

該当のソースコード

<body> <div class="header bg-dark text-light"> <img class="logo m-3" width="120" src="img/logo.png" alt="マーレン劇団" > <ul class="header-navigation col-12 clearfix"> <li class="list-item mr-5">クリエイター</li> <li class="list-item mr-5">メディア</li> <li class="list-item mr-5">トピックス</li> <li class="list-item mr-5">エントリー</li> <li class="list-item float-right">youtubeアイコン</li> </ul> </div> <script src="https://code.jquery.com/" charset="utf-8"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" charset="utf-8"></script> </body>

試したこと

divタグをspanにしてみましたが、１行になりませんでした。

UUUMを参考にオリジナルサイトを作成しています。
ヘッダーを「ロゴメニュー SNSリンク」の順番で並べたいです。

ご回答よろしくお願いいたします。

m.ts10806

2019/02/21 04:15

コードはマークダウンのcode機能を利用してご提示ください。（質問は編集できます）

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

回答3件

提示の参考サイトはBootStrapを使っているわけではなさそうですし、
せっかくBootStrapを使われてるのでしたらnavbarあたりで調整された方が綺麗にいくのでは。

投稿2019/02/21 05:14

m.ts10806

総合スコア80890

divタグをspanにしてどうしようとしたのか全くの謎ですが、
chocoronさんの回答で問題なく横並びになります。

HTML
1<body>
2  <div class="header bg-dark text-light">
3  <img class="logo m-3" width="120" src="img/logo.png" alt="マーレン劇団" >
4  <ul class="header-navigation col-12 clearfix">
5    <li class="list-item mr-5">クリエイター</li>
6    <li class="list-item mr-5">メディア</li>
7    <li class="list-item mr-5">トピックス</li>
8    <li class="list-item mr-5">エントリー</li>
9    <li class="list-item float-right">youtubeアイコン</li>
10  </ul>
11</div>
12<script src="https://code.jquery.com/" charset="utf-8"></script>
13<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" charset="utf-8"></script>
14</body>

CSS
1.header {
2  display:flex;
3}
4
5.header-navigation {
6  display:flex;
7  list-style:none; /*リストマーカー削除*/
8  justify-content:space-between; /*適当に均一に並べてみる*/
9  width:80%;
10}