どうしても画像に文字がかぶる

下記コードだと画像に文字がかぶってしまいます。
なにかおかしいでしょうか。。

HTML
1  <div class="design-wrapper">
2    <div class="container">
3      <div class="design-title">
4        <p>design</p>
5      </div>
6
7      <div class="design">
8        <div class="design-pic">
9          <img src="portfolio_images/portfolio_top.png">
10        </div>
11        <p class="textarea">
12          <a href="#"><b>ポートフォリオ</b>（当サイト）</a><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-link-45deg" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M5.712 6.96l.167-.167a1.99 1.99 0 0 1 .896-.518 1.99 1.99 0 0 1 .518-.896l.167-.167A3.004 3.004 0 0 0 6 5.499c-.22.46-.316.963-.288 1.46z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/><path d="M10 9.5a2.99 2.99 0 0 0 .288-1.46l-.167.167a1.99 1.99 0 0 1-.896.518 1.99 1.99 0 0 1-.518.896l-.167.167A3.004 3.004 0 0 0 10 9.501z"/></svg><br><br>
13        </p>
14
15        </div>
16
17      </div>
18    </div>
19

CSS
1.design-wrapper {
2  width: 100%;
3  height:1000px;
4  color: #707070;
5}
6
7.design-title{
8  padding:80px 0 60px 0;
9  width:100%;
10  float: left;
11}
12
13.design-title p {
14  font-size: 50px;
15  letter-spacing: 6px;
16  font-weight: lighter;
17  float: left;
18}
19
20.design-pic{
21  height: 644px;
22  width:100%;
23}
24
25.design-pic img{
26  height: 644px;
27  width:100%;
28  border: 0.5px #C3C0C0 solid;
29}
30
31.design p a{
32  color:#707070;
33}