Slider cannot be able to be centered

Question

I'm currently using a carousel bootstrap and is currently having trouble regarding on how do I center the carousel slider. And I would also like to resize my image to fill the slider. Sorry for the stupid question, any help would be much appreciated, thanks! Below attached is the image of the current situation of my website and the codes that I currently use for my website.

Current situation of my website

HTML

<section id="platform">
  <div class="container">
   <h2 align="center">Platforms</h2>
   <br />
   <div id="dynamic_slide_show" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <?php echo make_slide_indicators($connect); ?>
    </ol>

    <div class="carousel-inner">
     <?php echo make_slides($connect); ?>
    </div>
    <a class="left carousel-control" href="#dynamic_slide_show" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
     <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#dynamic_slide_show" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
     <span class="sr-only">Next</span>
    </a>

   </div>
  </div>

  </section>

CSS

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
@import url(https://unpkg.com/@webpixels/css@1.0/dist/index.css);

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
section {
  position: relative;
  width: 100%;
  height: 100%;
}

section h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  font : normal 300 64px/1 'Josefin Sans', sans-serif;
  text-align: center;
  white-space: nowrap;
}

section h2 {
  position: absolute;
  top: 5%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #000;
  font : normal 300 64px/1 'Josefin Sans', sans-serif;
  text-align: center;
  white-space: nowrap;
}

img.centeredimage{
   position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 300;
}


#section01 { background: url(https://i.ibb.co/ZVyY5Tp/26174.png) center center / cover no-repeat;}
#platform { background: url(https://i.ibb.co/DCskJkJ/Inari-Amertron-15-auto-x2.jpg) center center / cover no-repeat;}

.demo a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.demo a:hover {
  opacity: .5;
}



#section01 a {
  padding-top: 60px;
}
#section01 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}

Answer 1

Managed to centered it by doing

.carousel {
  margin: 100;
}