要素が横並びにならない

今模写コーディングを行っておりヘッダーを作成しています。
https://iyell.co.jp/business/loancenter/を模写しているのですが、
``html```

  <head>
    <link rel="stylesheet" href="stylesheet.css" />
    <link rel="stylesheet" href="responsive.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模写4</title>
  </head>
  <body>
    <!-- startヘッダー --------------------------------------------------------->
    <header class="header-login">
      <div class="container">
        <!-- ロゴアイコン------------------------------------------------- -->
        <div class="logo-header">
          <img src="img/logoK.png" alt="logo"/>
        </div>
        <!-- ロゴライン--------------------------------------------------- -->
        <div class="logo-line">
          <ul class="ul-line">
            <li class="house-icon"><img src="img/ico-homeK.gif" alt="house"/></li>
            <li>経営方針</li>
            <li>プラットフォーム</li>
            <li class="a-line"><a href="#">サービス</a></li>
            <li>メンバー</li>
            <li>アソビゴコロv</li>
            <li>会社情報ｖ</li>
            <li>採用サイト</li>
            <li>English</li>
          </ul>
        </div>
      </div>
      <div class="topface">
          <img src="img/topface.png" alt="パソコン"/>
          <ul class="topface-line">
              <li class="top"><a href="#">【在宅ローンテック　iYell(イエール)株式会社】></a></li>
              <li class="middle"><a href="#">サービス</a></li>
              <li>不動産事業者向け在宅ローンテック</li>              
          </ul>
      </div>

コメントアウトしているロゴラインの部分を横並びにしたいと思っております。
その並びにある、 <li class="house-icon"><img src="ico-homeK.gif" alt="house"/></li>も画像表示出させたいのですが出来ません。
試したことは、
css
/全体の調整/
{
margin: 0;
padding: 0;
}
.container {
max:width: 1200px;
padding: 0 40px;
margin: 0 auto;
}
/ ヘッダー /
.header {
padding:0 40px;
color: #000;
background-color: #fff;
}
/ ロゴライン　　 */
.header-login > .container {
display: flex;

}
.house-icon {
width: 10%;
}
.logo-header img {
width: 30%;
}
.ul-line {
display: flex;
margin-left: auto;
list-style: none;
}

 .header-login > .container {
      display: flex;
と
.ul-line  {
   display: flex;
   margin-left: auto;
   list-style: none;
にdisplay:flexをしました。
ご教授願います。

hatena19

2021/02/20 06:18

質問は編集できるので、読みやすいように修正してください。コードの画像は不要です。画像を入れるなら、現状のWEBページの画像を入れたほうがいいでしょう。かわりに、コードをマークダウンのコードブロックに入れてください。CSSコードはコードブロックに入ってますので、同様にHTMLコードをしてください。

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

回答1件

ベストアンサー

まず、下記の明らかな間違いを修正しましょう。

HTMLコードの header の閉じタグがない。topfaceクラスの前に挿入するといいでしょう。

html
1<!-- 前略 -->
2
3</header> 
4<div class="topface">
5
6<!-- 後略 -->

CSSコードの max:width: 1200px; を max-width: 1200px;

あとは、CSSを下記のような感じで修正すればいいでしょう。

css
1/* ロゴライン　　 */
2.header-login > .container {
3  display: flex;
4  justify-content: space-between; /* 追加 両端揃え */
5}
6
7.house-icon {
8  width: 50px; /* 画像のサイズに合わせて固定値で */
9}
10.logo-header img {
11  width: 120px; /* 画像のサイズに合わせて固定値で */
12}
13.ul-line  {
14  display: flex;
15/*  margin-left: auto; 不要 */
16  list-style: none;
17}
18
19.ul-line > li {
20  padding: 20px; /* メニューの間隔 お好みで */
21  display: flex;
22  align-items: center; /* 上下中央配置 */
23}