画像の下に背景色が少し表示されているのをなくしたい

以下のようなHTMLとCSSで構成されたサイトを作成しましたが、
画像の下部分に少し背景色が出てしまっています。

これをなくす方法を教えてください。

デベロッパーツールで見てもマージン、パディングはないようです。

コードを大幅に変更して、右側部分だけに背景色を適用でもいいのですが（というかはじめはそうしようとしたのですが）、
そうすると右側テキストがうまく中央に表示できず、
結局左の画像と右のテキストを包含するdivに背景色をつけて今に至ります。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <!-- Required meta tags -->
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="css/style.css">
8  <title>ホームページ</title>
9</head>
10<body>
11
12
13    <div class="top">
14       <div class="top-img-box">
15        <img src="img/topimg1.jpg" alt="" class="top-img">         
16       </div>
17         <h1 class="top-text1">素敵な<br>Website</h1>  
18    </div>
19
20
21 </body>
22</html>
23

css
1* {
2box-sizing: border-box;
3}
4html, body,
5ul, ol, li,
6h1, h2, h3, h4, h5, h6, p, div {
7  margin: 0;
8  padding: 0;
9}
10
11
12.top {
13	display: flex;
14	width: 100%;
15	align-items: center;
16	background-color: #ff9999;
17	padding-bottom: 0;
18}
19
20.top-img {
21	width: 100%;
22}
23
24.top-img-box {
25	width: 65%;
26
27}
28
29.top-text1 {
30	width: 35%;
31	text-align:center;
32	font-size: 25px;
33	letter-spacing: 1px;
34	margin: 0;
35}
36