只今ワードプレスにてランディングページを作成中です。

http://sskproduct.com/travel-bottle/

こちらのグレーの「なぜ無料で提供するのか？」
の部分なのですが、

■左側に余白ができてしまう
■三角形が中央からずれてしまう
■三角形をもう少し大きくしたい
以上の三点で困っております。

↓CSSでこのように入力しております。↓

h2{
width: 100vw;
background-color:#a7a7a7;
　　font-size: 15px;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
position: relative;
}

h2:before{
content: "";
border: 12px solid transparent;
border-top: 12px solid #a7a7a7;
position: absolute;
right: 30%;
bottom: -23px;
}
h2:after{
content: "";
border: 12px solid transparent;
border-top: 12px solid #a7a7a7;
position: absolute;
right: 30%;
bottom: -24px;
}

お分かりの方、ご返答を頂ければ幸いです。