bootstrap carousel - 2 carousel in the same row - html

Question

I decided 2 use bootstrap carousel to show some pictures of some projects, but sadly I have some problems with this.
I want 2 carousels on the same row, but this seems like an impossible mission.
I have tried to use css where I give the outter div a width on 100% and then created to "inner divs" with a width on 40 % each.
Sadly this doesn't solve the problem.
<div class="outterBound row">
<div class="insideSize">
<!-- This is the slideshow, all the css works and the pictures wont be too wide -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<!-- remember to add the number of pictures here, else the idicator wont work! -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/sogo/Photo 26-05-16 15.52.38.png" alt="login">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.52.41.png" alt="frontPage">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.52.50.png" alt="updateProfile">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.53.10.png" alt="createAccount">
</div>
<!-- just add another "item" here if you want more pictures -->
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- slideshow ends here, you can add/remove pictures as you want to. -->
<div class="insideSize">
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<!--<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li> -->
<!-- remember to add the number of pictures here, else the idicator wont work! -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/sogo/diverse/Billede1_1.jpg" alt="login">
</div>
<!-- just add another "item" here if you want more pictures -->
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- slideshow ends here, you can add/remove pictures as you want to. -->
</div>
</div>
and here is the css file:
#charset "UTF-8";
p{
font-family: Garamond;
font-size: 14px;
}
.font{
font-family: Garamond;
font-size: 14px;
}
.padding{
padding-left: 15px;
}
.jumbotron p{
font-family: Garamond;
font-size: 16px;
}
h4{
align-items: left;
}
.carousel-inner>.item>img{margin:0; max-height: 70%;}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 40%
margin: 0;
}
#media screen and (min-width: 1023px){
div.outterBound{
width: 100%;
}
}
#media screen and (min-width: 1023px){
div.insideSize{
width: auto;
}
}
Any ideas?
Here's a link for the website so you can see it with the pictures.

Answer 1

Try to use bootstrap column.
<div class="outterBound row">
<div class="insideSize col-sm-6">
First Carousel
</div>
<div class="insideSize col-sm-6">
Second Carousel
</div>
</div>
Be carful with the use of ID, an ID is unique, you can't have two id="myCarousel". Change the id for each carousel or use class.