How to align 3 images with width 100% - html

Question

I will make a carousel and i try to align left 3 elements with width 100% each but it is not working.
Can someone tell me how to align 3,4 elements on left to get out of the screens witdh so that i can change the image with the transform css property ?
it worked when i delete from the top of the page but when i insert it,everything is ruined.
.carousel {
width: 100%;
margin: 0;
background-color: #ccc;
position: relative;
overflow-x: hidden;
}
.carousel--list {
margin: 0;
padding: 0;
}
.carousel--slide {
background: #000;
text-align: center;
color:#fff;
width:100%;
display: inline-block;
overflow: hidden;
height: 400px;
padding: 0;
}
.carousel--track{
width: auto;
-webkit-transition: transform 2s;
transition: transform 2s;
}
.carousel--buttons {
content: "";
clear: both;
display: table;
}
.slide--image {
width: 100%;
}
.red{
background: red;
}
.blue{
background: blue;
}
.yellow{
background: yellow;
}
/* transform .*/
<section class="carousel">
<div class="carousel--track">
<div class="carousel--list">
<div class="carousel--slide red" data-index="0">
<img class="slide--image" src="./images/carousel/slider-bg.png">
</div>
<div class="carousel--slide blue" data-index="1">
<img class="slide--image" src="./images/carousel/slider-bg.png">
</div>
<div class="carousel--slide yellow" data-index="2">
<img class="slide--image" src="./images/carousel/slider-bg.png">
</div>
</div>
</div>
<div class="carousel--buttons">
<button onclick="prevSlide()" class="btn--prev btn">Prev</button>
<button onclick="nextSlide()" class="btn--next btn">Next</button>
</div>
</section>
Thanks in advance !

Answer 1

You could use flexbox or bootstrap. With those you will be able to edit your code as a gride and place elements where you wan't.
Flexbox is a css engine. Maybe what you need !
Example for bootstrap :
And flexbox :

Answer 2

Apply white-space: nowrap to the parent .carousel--list class...It will wrap all the inner inline-block items in a single row.
Note: I have applied transform(-30px) to the .carousel--list to give you a visual
Stack Snippet
.carousel {
width: 100%;
margin: 0;
background-color: #ccc;
position: relative;
overflow-x: hidden;
}
.carousel--list {
margin: 0;
padding: 0;
white-space: nowrap;
transform: translateX(-30px);
}
.carousel--slide {
background: #000;
text-align: center;
color: #fff;
width: 100%;
display: inline-block;
overflow: hidden;
height: 150px;
padding: 0;
}
.carousel--track {
width: auto;
-webkit-transition: transform 2s;
transition: transform 2s;
}
.carousel--buttons {
content: "";
clear: both;
display: table;
}
.slide--image {
width: 100%;
}
.red {
background: red;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
/* transform .*/
<section class="carousel">
<div class="carousel--track">
<div class="carousel--list">
<div class="carousel--slide red" data-index="0">
<img class="slide--image" src="http://via.placeholder.com/350x150/f00">
</div>
<div class="carousel--slide blue" data-index="1">
<img class="slide--image" src="http://via.placeholder.com/350x150/00f">
</div>
<div class="carousel--slide yellow" data-index="2">
<img class="slide--image" src="http://via.placeholder.com/350x150/f0f">
</div>
</div>
</div>
<div class="carousel--buttons">
<button onclick="prevSlide()" class="btn--prev btn">Prev</button>
<button onclick="nextSlide()" class="btn--next btn">Next</button>
</div>
</section>