問題点～Lightning proのロゴとヘッダーが大きすぎる～

Lightning proの仕様なのか、やたらロゴとヘッダーが自己主張する。というかでかい。
ロゴは推奨画像サイズ: 280×60pxとあったのでそのサイズにしてみたのだがやたらとでかい。
昔のわたしだったら自己主張激しかったので喜んだかも知れないが、もう無理だ・・・。

作業記録

ということでググってみたところ、下記を追加CSSに記述することで小さくできるようだ。※後で気づいたのだが純粋に小さい画像を用意すればよかった気もしている

.navbar-brand img {
  max-height: 20px;
}

これでロゴは小さくなったのだが別の問題が発生。
ロゴが置かれているヘッダー？部分の幅が広いままだ。
小さなロゴがでかいエリアに置かれているというのはそれはそれで目立つ。
このエリアの縦幅を狭める方法を考えた。
ぺディングやらマージンやらmax-heightやらをいじればよいのだが、何に対して指定すればよいのか分からない。
ググったところ、デベロッパーツールでElementsを調べれば良さそう。
要素選択モードにしてカーソルを合わせてみたところ、ちょこっとカーソルずらすだけでいくつも名前が出てくる。
もうこっからは適当にいじりまくり、結局div.navbar-headerをいじればわたしのイメージに近い感じになることが分かった。

div.navbar-header {
  padding: 10px 0px;
  max-height: 60px;
}

max-heightを0pxとかにしてしまうと今度はその下にあるメニューがロゴと重なってしまうため、60pxとした。
また、padding: 10px 0px;だが、これはパソコン表示では何も起きないのだがこれがないとスマホでのロゴの位置が上のほうにいってしまうので設定した。
それ以外の要素にも色々とマージンやらパディングをいじってみたものの、パソコンではいい感じで表示されるがスマホではイマイチだったりとかその逆もあったので、もうここで妥協しておく。
Chromeだと表示される数字をいじればその結果が反映され、どう表示されるのかが分かるが、なぜかipadとかその他携帯での見え方は選択できるがPCモードがない。
PCモードに切り替えられればもっと楽にCSSをいじれるようになるはずだ。
あとパディングとかイマイチ分かっていないのも気になる・・・。
CSSは昔職業訓練校で勉強したんだけどな・・・。