いつもお世話になっております。
楽天ショップのカテゴリページの横にPCモニターサイズによってお大きいな白スペースが出てしまってます。
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/コード関係は全くの素人で、改善方法をご教授ください。
ヘッダーコンテンツ中のcssは下記のようなものが入ってます。
上部:
<!--ヘッダー用タグはここから--><style>
/* スタイルはここに追加 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #FFFFFF;
color: #fff;
padding: 10px 20px;
text-align: center;
}
.logo {
margin-top: 10px;
width: 100%; /* ロゴをブラウザの幅に合わせる */
}
.logo img {
max-width: 100%; /* ロゴ画像の幅を100%に設定 */
height: auto; /* 高さを自動に設定 */
}
nav {
background-color: #d5923b; /* ナビゲーションの背景色を赤に設定 */
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
max-width: 100%; /* ナビゲーションの幅をブラウザの幅に合わせる */
overflow: auto; /* ナビゲーションが横に並ぶ場合にスクロールバーを表示 */
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
nav ul li a:hover {
text-decoration: underline;
}
table {
width: 100%; /* テーブルをブラウザの幅に合わせる */
}
table td {
background-color: #fff; /* テーブルセルの背景色を白に設定 */
}
/* メディアクエリ */
@media screen and (max-width: 768px) {
.logo img {
width: 100%; /* ロゴの幅を100%に設定し、ブラウザ幅に合わせる */
}
nav ul {
display: none; /* デバイス幅が768px以下の場合、ナビゲーションを非表示にする */
}
nav ul li {
display: block; /* デバイス幅が768px以下の場合、リスト項目をブロック要素に変更する */
margin-bottom: 10px; /* デバイス幅が768px以下の場合、リスト項目のマージンを追加する */
}
}
</style>
下部:
<style type="text/css">
<!--
/* パンくずリスト
----------------------*/
td.breadcrumbs_list{
padding:16px 10px;
background:#eee;
display:block;
width:710px;
border-bottom:2px solid #aaa;
}
/* カテゴリリスト
----------------------*/
table table table table td[width="1%"] span.subcategory_list{
display:none;
}
table table table table td[width="33%"] a.subcategory_list{
color: #333333!important;
font-size:12px!important;
text-decoration:none;
border:1px solid #ccc;
padding:8px 0;
border-radius:8px;
width:90%;
display:block;
transition: all 0.2s ease 0s;
margin:0 0 10px;
text-align:center;
position:relative;
background:#FFF;
}
table table table table td[width="33%"] a.subcategory_list:after{
content:">";
font-size:12px;
margin:-6px 0 0;
display:block;
position:absolute;
right:5px;
top:50%;
}
table table table table td[width="33%"] a.subcategory_list:hover{
background:#555;
color:#FFF!important;
border-color:#555;
}
-->
</style>
<style type="text/css">
<!--
#risFil td{
font-family:ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;
}
#risFil td br{
display:none;
}
#risFil td img{
margin:30px 0 15px;
}
#risFil td img[width="14"]{
display:none;
}
#risFil .category_itemnamelink{
height:30px;
color:#444;
font-size:10px;
letter-spacing:1px;
overflow:hidden;
display:block;
margin:0 0 10px;
width:230px;
line-height:15px;
}
#risFil .category_itemprice{
font-weight:bold;
color:#BF0000;
font-size:22px;
letter-spacing: -2px;
font-style: oblique;
}
#risFil .category_itemtaxpostage{
font-size:9px;
letter-spacing: -1px;
color:#444;
}
#risFil .category_itemtaxpostage + .category_itemtaxpostage{
display:none;
}
#risFil .not{
font-size:10px;
font-weight:normal;
display:block;
background:#FF6600;
color:#FFF;
padding:2px 0;
text-align:center;
width:100px;
margin:0 auto;
border-radius:3px;
}
#risFil .risfClfx{
font-size:10px;
}
#risFil .risfClfx img{
margin:0;
}
-->
</style>
レフトナビゲーションのcssは下記のようなものが入ってます。
<style type="text/css">
<!--
/* パンくずリスト
----------------------*/
td.breadcrumbs_list{
padding:16px 10px;
background:#eee;
display:block;
width:710px;
border-bottom:2px solid #aaa;
}
/* カテゴリリスト
----------------------*/
table table table table td[width="1%"] span.subcategory_list{
display:none;
}
table table table table td[width="33%"] a.subcategory_list{
color: #333333!important;
font-size:12px!important;
text-decoration:none;
border:1px solid #ccc;
padding:8px 0;
border-radius:8px;
width:90%;
display:block;
transition: all 0.2s ease 0s;
margin:0 0 10px;
text-align:center;
position:relative;
background:#FFF;
}
table table table table td[width="33%"] a.subcategory_list:after{
content:">";
font-size:12px;
margin:-6px 0 0;
display:block;
position:absolute;
right:5px;
top:50%;
}
table table table table td[width="33%"] a.subcategory_list:hover{
background:#555;
color:#FFF!important;
border-color:#555;
}
-->
</style>
<style type="text/css">
<!--
#risFil td{
font-family:ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;
}
#risFil td br{
display:none;
}
#risFil td img{
margin:30px 0 15px;
}
#risFil td img[width="14"]{
display:none;
}
#risFil .category_itemnamelink{
height:30px;
color:#444;
font-size:10px;
letter-spacing:1px;
overflow:hidden;
display:block;
margin:0 0 10px;
width:230px;
line-height:15px;
}
#risFil .category_itemprice{
font-weight:bold;
color:#BF0000;
font-size:22px;
letter-spacing: -2px;
font-style: oblique;
}
#risFil .category_itemtaxpostage{
font-size:9px;
letter-spacing: -1px;
color:#444;
}
#risFil .category_itemtaxpostage + .category_itemtaxpostage{
display:none;
}
#risFil .not{
font-size:10px;
font-weight:normal;
display:block;
background:#FF6600;
color:#FFF;
padding:2px 0;
text-align:center;
width:100px;
margin:0 auto;
border-radius:3px;
}
#risFil .risfClfx{
font-size:10px;
}
#risFil .risfClfx img{
margin:0;
}
-->
</style>
<style type="text/css">
/* 検索窓 */
.search {
width: 200px;
margin: 17px 0 0;
padding: 0;
text-align:center;
}
.search input {
margin-top: 5px;
padding: 5px;
}
/* バナー */
.banner {
margin: 20px auto;
}
.banner a {
text-decoration: none;
transition: all 0.4s;
}
.banner a:hover {
opacity: 0.7;
transition: all 0.4s;
}
/* カテゴリ */
.category {
width: 200px;
}
.category h4 {
margin: 30px 0 5px;
padding: 0;
font-size: 14px;
color: #999900;
text-align: center;
}
.category ul {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
}
.category li {
background-color: #d5923b;
border-radius: 10px;
margin-bottom: 5px;
font-size: 14px;
line-height: 24px;
text-align: center;
font-weight: bold;
color: #FFF;
}
.category a {
display: block;
border-radius: 10px;
color: #FFF;
text-decoration: none;
padding: 5px 10px;
}
.category a:hover {
background-color: #FF3300;
}
</style>
お手数をおかけしますが、よろしくお願いいたします。