さじさん
\u0026gt;･･･ロゴを左端、リストを右端にして真ん中を空白にしたい･･････
.header { ～ }
↓
header { ～ }
ご参考に↓
\u0026lt;!DOCTYPE html\u0026gt;
\u0026lt;html lang=\u0026quot;ja\u0026quot;\u0026gt;
\u0026lt;head\u0026gt;
\u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt;
\u0026lt;style\u0026gt;
/* --- 共通レイアウト --- */
header { background-color: #ffd; align-items: center; /* 修正 */
display: flex;
justify-content: space-between; /* 左右に分けるらしいけど、わけれない */
padding: 10px 20px;
}
.logo img {
height: 100px;
}
/* メニュー（PC用） */
.list { background-color: #dfd; /* 色別の為色付け */
display: block; display: flex; align-items: center;
list-style: none;
margin: 0;
padding: 0;
justify-content: flex-end;/* 右に寄せる */
}
.list li {
margin-left: 20px;
}
\u0026lt;/style\u0026gt;
\u0026lt;/head\u0026gt;
\u0026lt;body\u0026gt;
\u0026lt;header\u0026gt;
\u0026lt;div class=\u0026quot;logo\u0026quot;\u0026gt;
\u0026lt;img src=\u0026quot;https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png\u0026quot;/\u0026gt;
\u0026lt;/div\u0026gt;
\u0026lt;!--メニュボタンの始まり--\u0026gt;
\u0026lt;div class=\u0026quot;list-menu\u0026quot;\u0026gt;
\u0026lt;nav\u0026gt;
\u0026lt;ul class=\u0026quot;list\u0026quot;\u0026gt;
\u0026lt;li\u0026gt;①\u0026lt;/li\u0026gt;
\u0026lt;li\u0026gt;②\u0026lt;/li\u0026gt;
\u0026lt;li\u0026gt;③\u0026lt;/li\u0026gt;
\u0026lt;li\u0026gt;④\u0026lt;/li\u0026gt;
\u0026lt;/ul\u0026gt;
\u0026lt;/nav\u0026gt;
\u0026lt;/div\u0026gt;
\u0026lt;/header\u0026gt;
\u0026lt;/body\u0026gt;
\u0026lt;/html\u0026gt;
