【模写】ヘッダーのメニューがリストの順番と逆になってしまう

Question

ヘッダーのメニューが画像のようになります。
本当は順番が逆で、
左から　『サービス　ニュース　CSR ・・・』の順番にしたいのですがどうすれば良いでしょうか？
他のサイトのでデベロッパーツールを見てみましたが、JavaScriptが使われているようで、
私はまだ勉強できていないので HTML CSS のみで作りたいです。
float: right; が違うようなのですが、解決法が分かりません。。
また、もっと簡単な方法がありましたら是非教えてください。
宜しくお願いいたします！

【HTML】

<header> <div class="container"> <div class="header-left">CITY<span> Lab</span></div> <div class="header-right"> <a href="#" class="login">お問い合わせ</a> </div> <nav class="nav"> <ul class="menu_group"> <li class="menu-item"><a href="#">サービス</a></li> <li class="menu-item"><a href="#">ニュース</a></li> <li class="menu-item"><a href="#">CSR</a></li> <li class="menu-item"><a href="#">IR情報</a></li> <li class="menu-item"><a href="#">会社情報</a></li> <li class="menu-item"><a href="#">採用情報</a></li> </ul> </nav> </div> </header>

【CSS】
.menu_group {
height: 80px;
background-color: white;
}

.menu-item {
line-height: 80px;
display: inline-block;
margin-right: 50px;
float: right;　　←ここエラー出ていそうです。
}

.menu-item a {
color: #333;
font-size: 14px;
letter-spacing: 0.05em;
text-decoration: none;
font-family: "ヒラギノ角ゴ Pro";
font-weight: 600;
}

Comments

[jinba]

header{
}

.container{
}

.header-left{
}

.header-left span{
}

.header-right{
}

.login{
}

.nav{
}

このあたりの情報がないと他との干渉を見越せず憶測でしか回答できません

[_konatsu_]

ありがとうございます！

header {
height: 80px;
width: 100%;
background-color: white;
}

.container {
margin: 0 auto;
}

.header-left {
float: left;
line-height: 80px;
font-family: "Helvetica Neue";
font-size: 28px;
letter-spacing: 0.01em;
font-weight: bold;
color: #029ae2;
padding-left: 30px;
}

.header-left span {
color: #30d0ed;
}

..header-right {
float: right;
background-color: rgba(57, 196, 253, 1);
}

.header-right a {
padding: 30px 50px;
color: white;
font-size: 16px;
line-height: 80px;
letter-spacing: 0.05em;
text-decoration: none;
font-family: "ヒラギノ角ゴ Pro";
font-weight: 600;
}

.header-right:hover {
background-color: rgb(57,196,253,0.8);
}

[jinba]

↓ドットが一つ多いようですが本番ファイルもそのようになっているなら訂正ください
..header-right {
float: right;
background-color: rgba(57, 196, 253, 1);
}

Answer 1

<li class="menu-item"><a href="#">採用情報</a></li>
<li class="menu-item"><a href="#">会社情報</a></li>
<li class="menu-item"><a href="#">IR情報</a></li>
<li class="menu-item"><a href="#">CSR</a></li>
<li class="menu-item"><a href="#">ニュース</a></li>
<li class="menu-item"><a href="#">サービス</a></li>

ブラウザ大きさ変更の際にメニューリストが右寄せしたければfloat: right;は必要です
単純にhtmlファイルを並び替えればいいだけだと思います

Comments

[_konatsu_]

ありがとうございました！

Answer 2

.menu_group {
height: 80px;
background-color: white;
text-align: right; /* 追加 */
}

.menu-item {
line-height: 80px;
display: inline-block;
margin-right: 50px;
/* float: right; 削除 */
}

Comments

[_konatsu_]

ありがとうございました！

Answer 3

menu_groupをfloat:right;にしてmenu-itemをfloat:left;にしてはどうでしょう？

.menu_group {
  height: 80px;
  background-color: white;
  float:right;
}

.menu-item {
  line-height: 80px;
  display: inline-block;
  margin-right: 50px;
  float: left;
}

Comments

[_konatsu_]

ありがとうございました！
分かりやすく解決できましたのでベストアンサーに選ばせて頂きます！