ロゴ画像の縦横比が崩れる

ヘッダーロゴの設定について質問です。
PCからみると問題ないのですが、スマホからみると画像が細くなり崩れてしまいます。
対処法を教えていただきたいです。よろしくお願いします。

画像の高さを180pxに固定していますよね。この画像の場合、高さが180pxなら幅が480pxになります。
そのため、幅が480px以下の端末で見たときに、幅だけはみ出ないように調整されてしまうというわけです。

【解決策１】
ロゴ画像の縦横比をキープするためには、以下のCSSを追加すると良いと思います。

#logo img { object-fit: contain;
}

【解決策２】
480px以下の端末でロゴ画像の高さ指定を解除すればOKです。

@media only screen and (max-width: 481px) { #logo img { height: auto; }
}