CSS右と左と下から空白を削除する方法

Question

私はスライダーのコードを持っています。すべての仕事が正しい。しかし、私はページのポインタと右（または左）側の間の両方の部分（右と左）から空白を削除する必要があります。

[class^="scroll"] { 
 
position: absolute; 
 
top: 62%; 
 
height: 38%; 
 
line-height: 10em; 
 
padding: 0 3em; 
 
} 
 
[class^="scroll"] input { 
 
display: none; 
 
} 
 
[class^="scroll"] div { 
 
height: 100%; 
 
overflow: hidden; 
 
white-space: nowrap; 
 
word-wrap: normal; 
 
font-size: 0; 
 
} 
 
[class^="scroll"] img { 
 
position: relative; 
 
right: 0em; 
 
width: 15.5%; 
 
height: 100%; 
 
transition: .5s; 
 
} 
 

 
[class^="scroll"] label { 
 
cursor: pointer; 
 
font-weight: 600; 
 
font-size: 3em; 
 
} 
 
[class^="scroll"] input:nth-of-type(1):checked ~ label:nth-of-type(2):after, 
 
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(3):after, 
 
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(4):after, 
 
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(5):after, 
 
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(6):after, 
 
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(7):after { 
 
content: "\3009"; 
 
position: absolute; 
 
right: 0; 
 
} 
 
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(1):after, 
 
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(2):after, 
 
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(3):after, 
 
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(4):after, 
 
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(5):after, 
 
[class^="scroll"] input:nth-of-type(7):checked ~ label:nth-of-type(6):after { 
 
content: "\3008"; 
 
position: absolute; 
 
left: 0; 
 
} 
 

 
[class^="scroll"] input:nth-of-type(2):checked ~ div img {right: 25%;} 
 
[class^="scroll"] input:nth-of-type(3):checked ~ div img {right: 50%;} 
 
[class^="scroll"] input:nth-of-type(4):checked ~ div img {right: 75%;} 
 
[class^="scroll"] input:nth-of-type(5):checked ~ div img {right: 100%;} 
 
[class^="scroll"] input:nth-of-type(6):checked ~ div img {right: 125%;} 
 
[class^="scroll"] input:nth-of-type(7):checked ~ div img {right: 150%;}

<div class="scroll"> 
 
    <input type="radio" id="l0" name="raz" checked="checked"/> 
 
    <input type="radio" id="l1" name="raz"/> 
 
    <input type="radio" id="l2" name="raz"/> 
 
    <input type="radio" id="l3" name="raz"/> 
 
    <input type="radio" id="l4" name="raz"/> 
 
    <input type="radio" id="l5" name="raz"/> 
 
    <input type="radio" id="l6" name="raz"/> 
 

 
    <label for="l0"></label> 
 
    <label for="l1"></label> 
 
    <label for="l2"></label> 
 
    <label for="l3"></label> 
 
    <label for="l4"></label> 
 
    <label for="l5"></label> 
 
    <label for="l6"></label> 
 

 
    <div> 
 
     <img src="1.jpg" alt=""/> 
 
     <img src="2.jpg" alt=""/> 
 
     <img src="3.jpg" alt=""/> 
 
     <img src="4.jpg" alt=""/> 
 
     <img src="5.jpg" alt=""/> 
 
     <img src="6.jpg" alt=""/> 
 
     <img src="7.jpg" alt=""/> 
 
     <img src="8.jpg" alt=""/> 
 

 
     <img src="10.jpg" alt=""/> 
 
     <img src="9.jpg" alt=""/> 
 
     <img src="11.jpg" alt=""/> 
 
     <img src="12.jpg" alt=""/> 
 
     <img src="13.jpg" alt=""/> 
 
     <img src="20.jpg" alt=""/> 
 
     <img src="21.jpg" alt=""/> 
 
     <img src="23.jpg" alt=""/> 
 
    </div> 
 
</div>

私はすでに別のパディング、マージンと `tをする決意をしてみてください。誰でも助けてくれますか？

Answer 1

私はあなたがscrollクラスを持つ要素に次の属性を追加する必要があります（私はあなただけの側の間隔を削除したいと思います）が正しくあなたの質問を理解している場合：

right: 0; 
left: 0; 

をこれは、最初のブロックを意味しますあなたのスニペットは次のようになります：

[class^="scroll"] { 
    position: absolute; 
    top: 62%; 
    right: 0; // tell the absolute element to have 0 space on the right 
    left: 0; // tell the absolute element to have 0 space on the left 

    height: 38%; 
    line-height: 10em; 
    padding: 0 3em; 
}