header 横並び（flex、grid）

Question

headerを画像の様に横並びさせたいです。
これだと、「リスト」と「りすと」がズレたり、上手くを幅を設定出来ずにいます。
どの様なコードにしたり、追加したら良いのでしょうか。
お助け下さい。

 <header>
         <div class="container-jg d-flex">
         <div class="header-logo">
           <img src="..." alt="ロゴ">
         </div>
         <div class="header-block">
           <ul class="header-list">
             <li>リスト1</li>
             <li>リスト2</li>
             <li>リスト3</li>
             <li>リスト４</li>
             <li>リスト5</li>
             <li>リスト6/li>
           </ul>
             <ul class="header-list margin-l-r">
               <li><span>りすと1</span></li>
               <li><span>りすと2</span></li>
               <li><span>りすと3</span></li>
               <li><span>りすと4</span></li>
               <li><span>りすと5</span></li>
               <li><span>りすと6</span></li>
             </ul>
         </div>
         <div class="header-item">
           <ul>
             <li>
               <a class="navbar-brand" href="..."> <img src="アイコン1" alt="" width="29" height="29"></a>
               </li>

             <li><a class="navbar-brand" href="..."> <img src="アイコン2" alt="" width="29" height="29"></a>
             </li>
             <li class="mark">マーク</li>
           </ul>
         </div>
         </div>
       </header>

.container-jg{
  width: 100%;
  width: 1146px;
  margin-left: auto;
  margin-right: auto;
}

header{
  background-color: #000000;
  width: 1920px; /* or max-widht */
  height: 80px;
}

.d-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
}

.header-logo img{
  padding-top: 27.3px;
  padding-bottom: 27.3px;
  padding-right: 100px;
}

.header-list　{
  float: left;
  list-style: none;
}
.header-list ul{
  display:flex;
}
.header-list li{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 25px;
  text-align: left;
  color: #fff;
}

ul{           /*ulの余白を消す*/
  margin:0;
  padding:0;
}

ul li{
  list-style:none; /*リスト装飾消す*/
}
.header-list li{
  display:inline-block;  /*リストを縦に横並び*/
}
.margin-l-r {
  margin:0 60px;   /*下のリストの左右に余白*/
}

.header-list li+li{    /*隣合う場所に余白*/
  margin-left:20px;
}

.header-list span{
  font-family: YuMincho;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 14px;
  text-align: left;
  color: #fff;
}
.header-item ul{     /* 追加*/
  display:flex;      /*追加*/
  display:space-between;
}
.header-item ul li{
  margin-left:20px;    /*左に余白*/
}

.mark{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 18px;
  line-height: 34px;
  text-align: left;
  color: #fff;
}

Answer 1

グリッドレイアウトで作った方が楽そうです。

CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA

Answer 2

.container-jg{
  width: 100%;
  width: 1146px;
  margin-left: auto;
  margin-right: auto;
}

・一番上のやつですけどwidthで被ってます

・リスト6が<li>リスト6</li>でなく<li>リスト6/li>

・横は100%指定でいいと思う

・俺は横並びにするのめんどくさかったからこんなやつ使ってました

<table>
  <tbody><tr>
    <th>TYPE</th><th> | </th>
    <th>UPLOAD</th><th> | </th>
    <th>VIEW</th><th> | </th>
    <th>SECOND</th><th> | </th>
    <th>TIMESTAMP</th>
  </tr>
  <tr>
    <th>VALUE</th><th> | </th>
    <td>2021-2-14</td><th> | </th>
    <td>13969</td><th> | </th>
    <td>299</td><th> | </th>
    <td>4:59</td>
  </tr>
</tbody>
</table>

Comments

[me1t]

最後のですが適宜<th> | </th>を取って使ってくださいね