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

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

HTML
1    <header>
2        <ul id="works">
3            <li class="menu"><img src="images/top/works-01.png" class="works" alt="menu"></li>
4            <li class="menu"><img src="images/top/works-space.png" class="space" alt="menu"></li>
5            <li class="menu"><a href="#"><img src="images/top/works-02.png" class="master" alt="menu"></a></li>
6            <li class="menu"><img src="images/top/works-line.png" class="line" alt="menu"></li>
7            <li class="menu"><a href="#"><img src="images/top/works-03.png" class="small" alt="menu"></a>
8        </ul>
9    </header>

CSS
1header {
2    max-width: 90%;
3    max-height: 95px;
4    margin: 0 auto;
5    padding: 2.5em 0em;
6}
7
8#works{
9    max-width: 100%;
10    list-style: none;
11    display: flex;
12    justify-content:space-around;
13    align-items: flex-end;
14}
15
16.menu li{
17    padding: 0;
18	display:block;
19}
20

gpsoft

2021/05/14 00:39

cssの最後にある、 .menu li {...} は、どこにも効かないと思います。仮に、どこかに効いたとして、左右のパディングが15emって、意図通りですか? 意図通りなら良いのですが、念のため確認していただけますか? 「ウィンドウの縮小時にはみ出してしまい」とありますが、はみ出すのがイヤだとすると、どうしたいですか? #worksに flex-wrap: wrap を追加すれば、(はみ出さずに)折り返すようになります。たとえば、5つめの画像だけが2行目へ折り返す、みたいな感じです。でも、それで期待通りでしょうか? あと、5つの画像の、縦横サイズが分かると(アバウトでOK)、第三者が同じ現象を再現させやすくなると思います。