画像とテキストの横幅が合わない

前提・実現したいこと

添付した画像の通り、
上の3つの画像と下のテキストの幅を合わせたいです。
（赤線で示しております）
text-align:centerやmarginも試したのですが、
ぴったりと横幅は合せられませんでした。
position: absolute;は絶対指定のため、
レスポンシブ対応していないため、無しでお願いします。

発生している問題・エラーメッセージ

画像とテキストの横幅が合わない

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>portfolio</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
 </head>
 
 <header id="header">
  <div class="header-wrapper">
   <h1><a href="#"><img src="img/logo.jpg" width="85px" hight="85px"></a></h1>
   <nav>
   <ul>
    <li><a href="#">BUONO!の特徴</a></li>
    <li><a href="#">選べる3つのプラン</a></li>
    <li><a href="#">対応エリア</a></li>
    <li><a href="#">お問い合わせ</a></li>
   </ul>
   </nav>
  </div>
 </header>

 <body>
  <main id="main">
   <div class="mainvisual">
    <img class="img-main" src="img/mainvisual.jpg" alt="mainvisual">
    <div class="black-wrapper">
      <p class="text-a style">準備・片付けもお任せください!</p>
      <p class="text-b style">ケータリング</p>
      <p class="text-c style">1人 1,500円（税抜）～</p>
      <p class="text-d style">BUONO!Catering</p>
    </div>
   </div>
   
   <section class="feature"> 
    <div class="container">
    <h2 class="title">BUONO!Cataring<br>3つの特徴</h2>
　  <div class="container2">
  　<div class="content">
     <img class="feature-img" src="img/feature1.jpg" alt="feature1">
     <h3>リーズナブルな価格<br>1人1,500円(税抜き)～</h3>
      <p>
BUONO! ではリーズナブル<br>
な価格でサービスをご提供。<br>
予算とご相談してプランを<br>
決めていただけます。
      </p> 
    </div> 
 

  　<div class="content2">
     <img class="feature-img" src="img/feature2.jpg" alt="feature2">
     <h3>アドバイザーが<br>料理や演出をご提案</h3>
      <p>
専門のアドバイザーが料理<br>
の内容や、パーティーの演<br>
出をご提案します。
      </p> 
    </div>

  　<div class="content3">
     <img class="feature-img" src="img/feature3.jpg" alt="feature3">
     <h3>準備・片付けも<br>スタッフにお任せ!</h3>
      <p>
準備・片付けは当社のスタッ<br>
フが行うので、お客様のお<br>
手を煩わせません。
      </p> 
    </div>
    </div>
   </section> 

   <section class="plan">
    <div class="container">
    <h2 class="title">選べる3つのプラン</h2>
    <p>お料理や飲み物、演出などはどのプランでもカスタマイズ<br>可能です。まずはお気軽にご相談ください。</p>
    </div>
    
    <div class="container2">
    <div class="content">
     <img src="img/plan1.jpg" alt="plan1">
    </div>
    <div class="content-b">
<h3 class="original">オリジナルプラン</h3>     
<p>
10人以上　1人1,500円(税抜)～
</p>
<p>
お客様に合わせたプランをコーディネーターが<br>
ご提供します。まずはご予算やパーティーの形<br>
式をお伺いします。
</p>
<p>
何も決まっていなくても、お気軽にご相談くだ<br>
さい?
</p>
</div>
</div>

 <div class="container3">
    <div class="content">
     <img src="img/plan2.jpg" alt="plan2">
    </div>
    <div class="content-b">
<h3>フィンガーフードプラン</h3>     
<p>
10人以上　1人2,000円(税抜)～
</p>
<p>
一口で食べられるお食事をご提供するプランで<br>
す。立食パーティーに最適です。
</p>
</div>
</div>

 <div class="container4">
    <div class="content">
     <img src="img/plan3.jpg" alt="plan3">
    </div>
    <div class="content-b">
<h3>贅沢プラン</h3>     
<p>
10人以上　1人3,000円(税抜)～
</p>
<p>
伊勢海老や和牛など、ぜいたくな食材をふんだ<br>
んに使用したお料理を提供するプランです。
</p>
</div>
</div>
    </div>
   </section>

   <section class="area">
   <div class="wrapper-area">
   <div class="area1">
大阪府<br>
大阪市（旭区、阿倍野区、生野区、北区、此花区、城東区、住之江区、住吉区、大正区、<br>
中央区、鶴見区、天王寺区、浪速区、西区、西成区、西淀川区、東住吉区、東成区、東<br>
淀川区、平野区、福島区、港区、都島区、淀川区） 池田市、茨木市、大阪狭山市、柏原市、<br>
門真市、堺市（北区、堺区、中区、東区、美原区）、吹田市
   </div>
   <div class="area2">
兵庫県<br>
芦屋市、尼崎市、宝塚市、西宮市
   </div>
   <div class="area3">
大阪府、兵庫県内で上記に記載がない地域は要相談。
   </div>
   </div>
   </section>

  </main>
 </body>

</html>

■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

@charset "utf-8"

#post_contents ul li { list-style-type:none; background-image:none; padding-left:0; }

a {
 text-decoration: none;
 color: #4b4b4b; 
}

h1 {
 margin: 0; padding: 0;
}

li {
 list-style: none;
 display: inline-block;
 margin: 0 0 0 30px ;
 font-size: 14px;
}

ul {
 display: flex;
 margin: 0;
 padding: 0;
 align-items: center;
}

header {
 width: 100%;
 padding: 30px 4% 10px;
 background-color: #fff;
 position: fixed;
 top: 0;

}

#header .header-wrapper {
 display: flex;
 justify-content: center;
 align-items: center;
}

#header img {
 border-radius: 30px;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #e6e6e6;
}

#main .img-main {
 width: 100%;
 height: 600px;
 object-fit: cover;
}

#main .mainvisual {
 position: relative;
 z-index:-1;
}

.mainvisual .style {
 color: #fff;
}

.mainvisual .text-d {
 position: absolute;
 top: 38%;
 left: 18%;
 font-size: 500%;
}

.mainvisual .text-a {
 position: absolute;
 top: 65%;
 left: 18%;
}

.mainvisual .text-b {
 position: absolute;
 top: 75%;
 left: 18%;
}

.mainvisual .text-c {
 position: absolute;
 top: 80%;
 left: 18%;
}

.feature .title {
 text-align: center;
}

.feature-img {
 height: 135px; 
}

.feature .title {
 margin: 15px 0 0;
 font-size: 18px;
}

.feature .container2 {
 display: flex;
 justify-content: center;
}

.feature h3 {
 margin: 0;
 font-size:14px;
}

.container2 h3 {
 text-align: center;
}

.container2 p {
 text-align: left;
 font-size: 14px;
 margin: 5px 0 0;
}

.plan img {
 width: 300px;
} 

.container2 {
 display: flex;
}

.container3 {
 display: flex;
}

.container4 {
 display: flex;
}

.plan h2 {
 margin: 50px 0 15px;
} 

.plan .container {
 text-align: center;
}

.plan .container2 {
 justify-content: center;
 margin: 0 0 10px;
}

.plan .container3 {
 justify-content: center;
 margin: 0 0 10px;
}

.plan .container4 {
 justify-content: center;
 margin: 0 0 10px;
}

.plan .content-b {
 text-align: left;
 font-size: 14px;
 margin: 0 0 0 15px;
}

.area {
 justify-content: center;
}