在 #sec2 區域中，先安排容器及網格配置，再安排圖文內容。 (參考如下)
<h1>New Product</h1>
<div class="container">
<div class="row">
<!-- 分配左右二個框 (左側圖片區) -->
<div class="col-12 col-md-6">
<!-- 圖片的外圍再加一個框，目的是為了圖片下方的陰影 -->
<div class="imgarea">
<img src="img/sec2img.jpg" class="d-block w-100" alt="">
</div>
</div>
<!-- 分配左右二個框 (右側文字區) -->
<div class="col-12 col-md-6">
<h3>美白系列修護精華液</h3>
<p>美白是一輩子的事，唯有長期做好防曬與美白保養...。</p>
<p>美白是一輩子的事，唯有長期做好防曬與美白保養...。</p>
</div>
</div>
</div>
調整 CSS 樣式設計 (以下參考使用, 不一定要相同的設定)
/* 設計兩旁陪襯的背景圖，同一個區域同時擁有3張背景圖 ====================== */
#sec2 {
background-image: url(img/sec2_f1.png), url(img/sec2_f1.png), url(img/sec2_f2.png);
background-repeat: no-repeat;
background-position: -15px 60px, left bottom, right bottom;
background-size: 10vw auto, 7vw auto, 15vw auto;
/* 背景圖尺寸寬度單位使用vw，對應到螢幕的百分比，10vw表示螢幕寬度的百分之10 */
}
/* 設計左側區塊框，讓內容(圖片)水平置中，讓重疊的物件在上方 ================= */
#sec2 .col-12:first-child { text-align: center; }
/* 這是左側圖外再加的框 */
#sec2 .col-12 .imgarea { position: relative; display: inline-block; }
/* 這是左側圖下方的陰影設計 */
#sec2 .col-12 .imgarea::after {
content: ''; background: url(img/shadow.png) no-repeat;
position: absolute; left: 0; bottom: -30px; width: 100%; height: 30px;
background-size: contain; transform: translateY(-2px);
}
/* 這是左側圖的設計 */
#sec2 .col-12 img {
display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px;
}
/* 設計右側文字內容的區塊框 ================================== */
#sec2 .col-12:last-child { position: relative; padding: 20px; padding-bottom: 50px; text-align: justify; }
#sec2 .col-12:last-child h3 { margin-bottom: 20px; position: relative; z-index: 2; }
#sec2 .col-12:last-child p { position: relative; z-index: 2; }
/* 考量 RWD 再加以調整設計 */
WEB