リンク画像と画像を横並びに配置したい

Question

HTML・CSS初心者です。
ウィンドウの縮小に合わせてサイズの縮小する画像とリンク画像を横並びに配置したいです。
リンクではない画像が大きくなってしまったり一列の画像がウィンドウの縮小時にはみ出してしまいなかなかうまくいきません。
よろしければご教示いただけるととてもありがたいです。
各画像サイズはworks-01:279 × 95px、works-02:568 × 95px、works-03:389 × 95px、works-space&works-line:21 × 95pxです。

    <header>
        <ul id="works">
            <li class="menu"><img src="images/top/works-01.png" class="works" alt="menu"></li>
            <li class="menu"><img src="images/top/works-space.png" class="space" alt="menu"></li>
            <li class="menu"><a href="#"><img src="images/top/works-02.png" class="master" alt="menu"></a></li>
            <li class="menu"><img src="images/top/works-line.png" class="line" alt="menu"></li>
            <li class="menu"><a href="#"><img src="images/top/works-03.png" class="small" alt="menu"></a>
        </ul>
    </header>

header {
    max-width: 90%;
    max-height: 95px;
    margin: 0 auto;
    padding: 2.5em 0em;
}

#works{
    max-width: 100%;
    list-style: none;
    display: flex;
    justify-content:space-around;
    align-items: flex-end;
}

.menu li{
    padding: 0;
	display:block;
}

Comments

[gpsoft]

cssの最後にある、
.menu li {...}
は、どこにも効かないと思います。
仮に、どこかに効いたとして、左右のパディングが15emって、意図通りですか?
意図通りなら良いのですが、念のため確認していただけますか?

「ウィンドウの縮小時にはみ出してしまい」とありますが、はみ出すのがイヤだとすると、どうしたいですか?
#worksに flex-wrap: wrap を追加すれば、(はみ出さずに)折り返すようになります。たとえば、5つめの画像だけが2行目へ折り返す、みたいな感じです。でも、それで期待通りでしょうか?

あと、5つの画像の、縦横サイズが分かると(アバウトでOK)、第三者が同じ現象を再現させやすくなると思います。

[isiash1119]

15emは再確認したところ意図していなかったので削除いたしました！
flex-wrap: wrapで上手くいきました。
あと縦横サイズの件、今後注意して記入します。
返信のほう遅れてしまい申し訳ありません。
とても助かりました！

[gpsoft]

お疲れさまです。
これで解決なら、対応内容を回答欄に書いてクローズしていただけると幸いです。

[isiash1119]

承りました。
クローズの方法まで教えていただき幸いです。
とても助かりました！

Answer 1

header {
max-width: 90%;
max-height: 95px;
margin: 0 auto;
padding: 2.5em 0em;
}

works{
max-width: 100%;
list-style: none;
display: flex;
flex-wrap: wrap
justify-content:space-around;
align-items: flex-end;
}

こちらで解決することができました！
gpsoft様、ありがとうございました。