swiperの矢印（swiperボタン）の位置を変更したい（真ん中の写真に合わせたい）

Question

前提・実現したいこと

swiperスライダーの矢印ボタンの位置を真ん中の写真に合わせて移動したい

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

エラーメッセージ

該当のソースコード

<div class="swiper-container">         
                <div class="swiper-wrapper"> 
                    <div class="swiper-slide">slide1</div>
                    <div class="swiper-slide">slide2</div>
                    <div class="swiper-slide">slide3</div>
                </div>
                <div class="swiper-pagination"></div>      
                <div class="swiper-button-prev swiper-button-prev1 "></div>
                <div class="swiper-button-next swiper-button-next1"></div>
            </div>

試したこと

.swiper-button-next {
    right: 30%;
}
.swiper-button-prev{
    left: 30%;
}

.swiper-button-next1 {
    right: 30%;
}
.swiper-button-prev1{
    left: 30%;
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

「試したこと」でだいたいオッケーなような気がしますが、どういう問題が発生していますか？

[Hard_worker]

お返事ありがとうございます。
全く適用されないんです。。

[Lhankor_Mhy]

こちらの環境では問題が起きていないですね。
CSSを読み込んでいるコードの周辺をご提示いただけますか？

[Hard_worker]

html

<section class="about-section">
<div class="about-top">
<div class="swiper-container swiper-container1 swiper-about">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/about11.JPG" alt=""></div>
<div class="swiper-slide"><img src="img/about12.JPG" alt=""></div>
<div class="swiper-slide"><img src="img/about13.JPG" alt=""></div>
</div>
<div class="swiper-pagination swiper-pagination-about"></div>
<div class="swiper-button-prev swiper-button-white swiper-button-next1"></div>
<div class="swiper-button-next swiper-button-white swiper-button-next1"></div>
</div>
<div class="about-side">
<ul>
<li class="about-side-li1">aboutme</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li class="about-side-li2">テキスト</li>
</ul>
</div>
</div>
</section>

[Hard_worker]

scss

span.swiper-pagination-bullet.swiper-pagination-bullet-active{
opacity: 1;
background: black;
}
span.swiper-pagination-bullet {
background: black;
opacity: .1;
}
.swiper-button-next1 {
right: 30%;
}
.swiper-button-prev1 {
left: 30%;
}
.swiper-about{
padding: 0 0 30px 0;
}

.about{
position: relative;
&-left-bg{
position: absolute;
width: 25%;
height: 100%;
background-color: white;
z-index: 2;
}
&-top{
display: flex;
margin-top: 98px;
}
&-side{
background-color: white;
position: absolute;
width: 18.2%;
padding:15px 0 3% 5.3%;
z-index: 2;
ul{
list-style: none;
padding: 0;
margin: 0;
li{
margin-bottom: 15px;
}
}
&-li1{
padding-bottom: 33px;
}
&-li2{
padding-top: 21px;
}
}
&-section{
margin-bottom: 70px;
}
}

[Hard_worker]

お手数をおかけいたしますが、ご確認のほどよろしくお願いいたします。

[Lhankor_Mhy]

<div class="swiper-button-prev swiper-button-white swiper-button-next1">
↑このクラス名は間違いですよね？

ご提示いただいているコードで試してみましたが、問題なく、中央のスライドのわきに移動しています。

[Hard_worker]

ご確認いただき、ありがとうございます。
こっちは全然適用されないのですが、もう一度確認します。
（WordPress上での実装です。）