メニューバーの一部を右寄せにする

Question

こんばんは。初めて質問させていただきます。
メニューバー（ナビゲーションバー）を作成中で
メニューの一部だけを右寄せにしたいのですが、その方法を調べてもいまいちわかりませんでした。

【HTML】

<nav class="global_menu"> <ul> <li><a href="#">商品</a> </li> <li><a href="#">サービス</a> 　　　　</li> <li><a href="#">採用情報</a> </li> <li><a href="#">LANGUAGE ▼</a> 　　　　</li> <li><a href="#">お問い合わせ会社情報</a> 　　　　</li> </ul> </nav>

【CSS】
.global_menu{
color:black;
}

.global_menu ul{
display: flex;
flex-direction: row;
width:100%;
margin:0;
padding-top:50px;
}

.global_menu ul li {
list-style-type: none;
}

.global_menu ul li a{
color:black;
text-decoration: none;
}

調べたらflexを利用するかmargin-left:autoを利用するかだと思ったのですが
調べても最後のアイテムだけ右寄せにする、というものしか出てこなくて
試しに
.global_menu ul li:nth-last-child(-n+2){
margin-left:auto;}

と入れてみましたが、右寄せになったアイテム同士の隙間があいてしまって、
デザインが崩れてしまいます。

２つのアイテムのみを右寄せする場合は、flex使うよりfloatやinline-blockを
使った方がいいんでしょうか？
CSS初心者なもので、自力では解決できませんでした。。。

ご回答お待ちしております。よろしくお願いいたします。

Answer 1

下記ですね。

.global_menu ul li:nth-last-child(2){
  margin-left:auto;
}

:nth-last-child(-n+2)だと後ろから1番目と2番目の要素に適用されしまいます。

Comments

[kyon_02]

回答ありがとうございます！
無事解決できました！

Answer 2

LANGUAGE ▼と
お問い合わせ会社情報
の2つを右側に寄せたい場合は
Languageの左のmarginをautoですね

.global_menu ul li:nth-last-child(2){
margin-left:auto;}

Comments

[kyon_02]

回答ありがとうございます！
なるほど！一つしか右寄せしたくないとき、という言葉に囚われて
どっちもに指定しなきゃいけないのかと思っていました。。。

右寄せにできました！ありがとうございましたー！