Unable to position carousel next to aside - html

Question

I am currently trying to create side bar next to my carousel, However for some reason, I can't get the carousel to center on the page while the aside is next to it. I tried using margin:auto auto but had no luck. I also tried using Justify-content:center. Anyone know why it won't move?
html:
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<aside class="rightSideSection container clearfix">
<header style="background: #2A2A36;"><h1 class="bold">Whats popular</h1></header><br>
<ul class="popularList">
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</aside>
CSS:
#carouselSlides{
display: inline-block;
width: 700px;
justify-content: center;
}
.carousel-inner img{
}
/*right side bar*/
.rightSideSection{
background: #ffffff;
width: 280px;
float: right;
margin-top: 40px;
}
.rightSideSection h1{
font-size: 30px;
}
.popularList li{
margin-left: 20px;
}

Answer 1

maybe this can work for you, to align the carousel to center:
<div style="text-align: center; text-align: -webkit-center;">
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<div>
Here basically the "carouselSlides" is contained in a div
providing the div styles as:
div{
text-align: center;
text-align: -webkit-center;
}