CSSでOS別対応について

Question

お世話になっております。
楽天とヤフーに商品の特集ページをゴールドを使って作成したのですが、
アイフォンで見たときにバックカラーをフルスクリーンで指定している部分が
横に伸びてしまう現象が発生してしまいました。
パソコンやアンドロイド(確認した端末はエクスペディア)では問題なく、
横に伸びることはありませんでした。
何度かコードを書き換えたりしてみましたが直りませんでした。
アイフォンに対応させるになにか専用のコードなどが必要なのでしょうか？

バックカラーを指定しているCSSコード↓↓

/*バックイメージ*/
.scene1-1_back{
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    background-color: #efd552 ;
	margin: 0 -500%; /* ネガティブマージンを追記 */
    padding: 0 500%;
    padding-top: 45%;
	
	
}
		
.scene2-2_back{
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    background-color: #8fea54 ;
margin: 0 -500%; /* ネガティブマージンを追記 */
    padding: 0 500%;
    padding-top: 45%;	
}
		
.scene3-3_back{
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    background-color: #5687e8 ;
margin: 0 -500%; /* ネガティブマージンを追記 */
    padding: 0 500%;
    padding-top: 45%;	
}
				
				
.scene4-4_back{
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    background-color: #e59e57 ;
margin: 0 -500%; /* ネガティブマージンを追記 */
    padding: 0 500%;
    padding-top: 45%;	
}

.scene5-5_back{
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    background-color: #e25998 ;
margin: 0 -500%; /* ネガティブマージンを追記 */
    padding: 0 500%;
    padding-top: 45%;	
}


@media screen and (max-width:640px){
	
.scene1-1_back{
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 50% !important;
	background-color: #efd552 !important;
	    background-size: cover;
	height: 100vw;

	    }
		
.scene2-2_back{

    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 50% !important;
	background-color: #8fea54 !important;
    background-size: cover;
	height: 100vw;
	    }
		
.scene3-3_back{

    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 50% !important;
	background-color: #5687e8 !important;
    background-size: cover;
	height: 100vw;
	    }


.scene4-4_back{

    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 50% !important;
	background-color: #e59e57 !important;
    background-size: cover;
	height: 100vw;
	    }

.scene5-5_back{

    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 50% !important;
	background-color: #e25998 !important;
    background-size: cover;
	height: 100vw;
	    }


	
}

特集ページ
https://www.rakuten.ne.jp/gold/tokeiten/feature/prospex/index.html

お手数おかけしますが、アドバイスのほうお願いいたします。

Accepted Answer

ECマスターズの伊藤です。

> 楽天とヤフーに商品の特集ページをゴールドを使って作成したのですが、
> アイフォンで見たときにバックカラーをフルスクリーンで指定している部分が
> 横に伸びてしまう現象が発生してしまいました。

こちらの現象ですが、
CSSに、下記のコードを追加していただきますと
解消することができると思いますので、
ご確認くださいませ。

html {
overflow-x: hidden;
}

Answer

ご回答ありがとうございます！
教えていただいたコードを追加しましたら、
バックカラーが横に伸びなくなりました。
ありがとうございます。