flexbox 中央寄せまたは右寄せさせている要因

Question

制作サイト

現在、上記の制作サイトはHTMLの雛形を利用しているのですが、<header>タグ内の<nav class="login_box">の要素を追加したいのですが、ブラウザが981pxを境にそれ以下であれば勝手に中央寄せでそれ以上であれば右寄せになってしまいます。
一方で、<nav class="main">はブラウザのサイズにかかわらず、常に右寄せになります。

閲覧しているブラウザは下記の通りです。

Google Chrome
バージョン: 71.0.3578.98（Official Build） （64 ビット）

1. <nav class="login_box">もブラウザサイズにかかわらず、常に右寄せに配置したいのですが、ディベロッパーツールで適用されているCSSを見ても、login_boxがなぜサイズによって位置が変わってしまうのか、または.main要素が常に右寄せで表示されるのかがわかりません。。

もしわかる方かいらっしゃれば、原因やそのディベロッパーツール上の正しい見方をご教示頂けないでしょうか？

2)また、本来は、内容が変わってしまうようなサイトのリンク先でご質問した場合、将来この記事が他の方の役に立たなくなってしまうため、望ましい質問の仕方ではない点を理解しております。ただし、コードの全文を載せることは難しく、また影響しているCSSも本件に限ってはわからないので、抜粋してコードを載せることもできません。このような類のご質問をさせていただく場合、良い方法はございますでしょうか？
（私の認識においては、ディベロッパーツール上、要素に影響を与えているCSS部分のみをコピペすることやファイルを保存して出力することはできないと理解しております。もちろんサイト全体でcommand+Sで関連ファイルは全て落とすことができるのですが、それを全て掲載するのは膨大でポイントもわかりづらくなってしまうので、ご質問の仕方に悩んでおります）

よろしくお願い申しげます。

Comments

[退会済みユーザー]

例えばCSSを外部サービスに載っけるか直でリンクを貼ればスムーズな回答が頂けると思います。

[pegy]

コメントありがとうございます。
直リングは上記の通り、記載をさせていただきました。
さて外部サービスとはJSFiddleやJSbinと言ったサービスのことでしょうか？
また、その場合、関連するCSSを一旦全て、転記することが良いのでしょうか？
念のために、確認をさせてください。

Answer 1

ソースを拝見しましたところ、#headerにdisplay:flex; justify-content:space-between;が指定されているので、<nav class="link">...</nav>が表示されないサイズでは#headerの子要素のうち真ん中にある.login_boxは何もしなければ中央に来ます。
もし.login_boxを右に詰めて表示させたいのであれば.login_boxにmargin-left:auto;を指定してみてください。
ちなみに大きい画面サイズでの#header .linksはdisplay:flex;なのでサイズいっぱいに表示されて、結果その隣の要素が両端に詰まったように見えるものと思われます。

Comments

[pegy]

コメントありがとうございます。
とてもよくわかりました。
サイズが小さい場合には.linkが表示されないのはなぜだろうとも思っていたのですが
980px)
#header .links {
display: none;
}
を見つけることができました。mediascreenは適用される状況でないとデベロッパーツール上表示されないのですね。
また、justify-contents:betweenよりもmargin-leftの方が優先されるのですね。
とても助かりました。よろしくお願い申し上げます。