スライサー　画像のサイズ

HTMLとCSSのみでスライサーを作りたいです。
スライサーのサイズを変更したいときはどうしたらいいですか？
余白がほしいのですが、画面いっぱいに出てきてしまいます。

div
1  <input checked type=radio name="slider" id="slide1" />
2  <input type=radio name="slider" id="slide2" />
3  <input type=radio name="slider" id="slide3" />
4  <input type=radio name="slider" id="slide4" />
5  <input type=radio name="slider" id="slide5" />
6
7  <div class="slider-wrapper">
8    <div class=inner>
9      <article>
10        <div class="info top-left">
11          <h3>Malacca</h3></div>
12        <img src="https://farm9.staticflickr.com/8059/28286750501_dcc27b1332_h_d.jpg" />
13      </article>
14
15      <article>
16        <div class="info bottom-right">
17          <h3>Cameron Highland</h3></div>
18        <img src="https://farm6.staticflickr.com/5812/23394215774_b76cd33a87_h_d.jpg" />
19      </article>
20
21      <article>
22        <div class="info bottom-left">
23          <h3>New Delhi</h3></div>
24        <img src="https://farm8.staticflickr.com/7455/27879053992_ef3f41c4a0_h_d.jpg" />
25      </article>
26
27      <article>
28        <div class="info top-right">
29          <h3>Ladakh</h3></div>
30        <img src="https://farm8.staticflickr.com/7367/27980898905_72d106e501_h_d.jpg" />
31      </article>
32
33      <article>
34        <div class="info bottom-left">
35          <h3>Nubra Valley</h3></div>
36        <img src="https://farm8.staticflickr.com/7356/27980899895_9b6c394fec_h_d.jpg" />
37      </article>
38    </div>
39    <!-- .inner -->
40  </div>
41  <!-- .slider-wrapper -->
42
43  <div class="slider-prev-next-control">
44    <label for=slide1></label>
45    <label for=slide2></label>
46    <label for=slide3></label>
47    <label for=slide4></label>
48    <label for=slide5></label>
49  </div>
50  <!-- .slider-prev-next-control -->
51
52  <div class="slider-dot-control">
53    <label for=slide1></label>
54    <label for=slide2></label>
55    <label for=slide3></label>
56    <label for=slide4></label>
57    <label for=slide5></label>
58  </div>
59  <!-- .slider-dot-control -->
60</div>
61
62```@import "bourbon";
63/*---- NUMBER OF SLIDE CONFIGURATION ----*/
64$num-of-slide: 5;
65
66.wrapper {
67    max-width: 60em;
68    margin: 1em auto;
69    position: relative;
70}
71
72input {
73    display: none;
74}
75
76.inner {
77    width: percentage($num-of-slide);
78    line-height: 0;
79}
80
81article {
82    width: percentage(1/$num-of-slide);
83    float: left;
84    position: relative;
85
86    img {
87        width: 100%;
88    }
89}
90
91/*---- SET UP CONTROL ----*/
92.slider-prev-next-control {
93    height: 50px;
94    position: absolute;
95    top: 50%;
96    width: 100%;
97    @include transform(translateY(-50%));
98
99    label {
100        display: none;
101        width: 40px;
102        height: 40px;
103        border-radius: 50%;
104        background: #fff;
105        opacity: 0.7;
106
107        &:hover {
108            opacity: 1;
109        }
110    }
111}
112
113.slider-dot-control {
114    position: absolute;
115    width: 100%;
116    bottom: 0;
117    text-align: center;
118
119    label {
120        cursor: pointer;
121        border-radius: 5px;
122        display: inline-block;
123        width: 10px;
124        height: 10px;
125        background: #bbb;
126        @include transition(all 0.3s);
127
128        &:hover {
129            background: #ccc;
130            border-color: #777;
131        }
132    }
133}
134
135/* Info Box */
136.info {
137    position: absolute;
138    font-style: italic;
139    line-height: 20px;
140    opacity: 0;
141    color: #000;
142    text-align: left;
143    @include transition(all 1000ms ease-out 600ms);
144
145    h3 {
146        color: #fcfff4;
147        margin: 0 0 5px;
148        font-weight: normal;
149        font-size: 1.5em;
150        font-style: normal;
151    }
152
153    &.top-left {
154        top: 30px;
155        left: 30px;
156    }
157
158    &.top-right {
159        top: 30px;
160        right: 30px;
161    }
162
163    &.bottom-left {
164        bottom: 30px;
165        left: 30px;
166    }
167
168    &.bottom-right {
169        bottom: 30px;
170        right: 30px;
171    }
172}
173
174/* Slider Styling */
175.slider-wrapper {
176    width: 100%;
177    overflow: hidden;
178    border-radius: 5px;
179    box-shadow: 1px 1px 4px #666;
180    background: #fff;
181    background: #fcfff4;
182    @include transform(translateZ(0));
183    @include transition(all 500ms ease-out);
184
185    .inner {
186        @include transform(translateZ(0));
187        @include transition(all 800ms cubic-bezier(0.77, 0, 0.175, 1));
188    }
189}
190
191/*---- SET POSITION FOR SLIDE ----*/
192%bind-prev-next-button {
193    font-family: FontAwesome;
194    font-style: normal;
195    font-weight: normal;
196    text-decoration: inherit;
197    margin: 0;
198    line-height: 38px;
199    font-size: 3em;
200    display: block;
201    color: #777;
202}
203
204%bind-next-button {
205    @extend %bind-prev-next-button;
206    content: "\f105";
207    padding-left: 15px;
208}
209
210%bind-next-label {
211    display: block;
212    float: right;
213    margin-right: 5px;
214}
215
216%bind-prev-label {
217    display: block;
218    float: left;
219    margin-left: 5px;
220}
221
222%bind-prev-button {
223    @extend %bind-prev-next-button;
224    content: "\f104";
225    padding-left: 8px;
226}
227
228%bind-background-active-dot {
229    background: #333;
230}
231
232%bind-opacity-info {
233    opacity: 1;
234}
235
236@for $i from 1 through $num-of-slide {
237    #slide#{$i}:checked {
238        & ~ .slider-wrapper .inner {
239            margin-left: percentage(1 - $i);
240        }
241
242        & ~ .slider-dot-control label:nth-child(#{$i}) {
243            @extend %bind-background-active-dot;
244        }
245
246        & ~ .slider-wrapper article:nth-child(#{$i}) .info {
247            @extend %bind-opacity-info;
248        }
249    }
250}
251
252@for $i from 1 through ($num-of-slide - 1) {
253    #slide#{$i}:checked {
254        & ~ .slider-prev-next-control label:nth-child(#{$i +1}) {
255            @extend %bind-next-label;
256
257            &::after {
258                @extend %bind-next-button;
259            }
260        }
261    }
262}
263
264#slide#{$num-of-slide}:checked ~ .slider-prev-next-control label:nth-child(1) {
265    @extend %bind-next-label;
266
267    &::after {
268        @extend %bind-next-button;
269    }
270}
271
272@for $i from 2 through $num-of-slide {
273    #slide#{$i}:checked {
274        & ~ .slider-prev-next-control label:nth-child(#{$i - 1}) {
275            @extend %bind-prev-label;
276
277            &::after {
278                @extend %bind-prev-button;
279            }
280        }
281    }
282}
283
284#slide#{1}:checked ~ .slider-prev-next-control label:nth-child(#{$num-of-slide}) {
285    @extend %bind-prev-label;
286
287    &::after {
288        @extend %bind-prev-button;
289    }
290}
291
292/*---- TABLET ----*/
293@media only screen and (max-width: 850px) and (min-width: 450px) {
294    .slider-wrapper {
295        border-radius: 0;
296    }
297}
298
299/*---- MOBILE----*/
300@media only screen and (max-width: 450px) {
301    .slider-wrapper {
302        border-radius: 0;
303    }
304
305    .slider-wrapper .info {
306        opacity: 0;
307    }
308}
309
310@media only screen and (min-width: 850px) {
311    body {
312        padding: 0 80px;
313    }
314}
315