我如何使旋转木马居中？

Question

I read some suggestions here and tried them already, none of them worked for me. So I'm including my codes here to see if someone can point me to the right direction.

1. I want to center the carousel.
2. I want a separate container inside the carousel with text and I want that container to look sort of faded either with an opacity element or the RGB (0,0,0,0.4).. element.

HTML-

I couldn't figure out how to post HTMLs here without getting a spacing error, so I opened up a pen in codepen:

https://codepen.io/mahiya-hawk/pen/YvZMbM

CSS-

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Calibri, sans-serif;
}
.background-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: -1000;
}
#video-bg-elem {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.navbar{
    background-color: RGBA(0,0,0,0.2) !important;
}
#brand-image{
    height: 100px;
}
a.navbar-brand{
    position: relative;
}
.navbar-nav > li{
    margin-left:10px;
    padding: 33px 10px;
  }
.navbar-nav > li > a{
    text-decoration: none;
    font-size: 2vh;
    font-size: 2.3vw;
    font-family: 'Freestyle Script';
    font-weight: 900;
    color: rgb(210, 21, 84) !important;
    padding-bottom: 0.2%;
    display: block;
}
.navbar-nav > li:hover,
.navbar-nav > li:focus {
    background-color: RGBA(0,0,0,0.4) !important;
    transition: .9s;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
    background-color: RGBA(0.0..0.4) !important;
}
.content {
    position: absolute;
    width: 100%;
    min-height: 100%;
}
.content h1 {
    text-align: center;
    font-size: 65px;
    text-transform: uppercase;
    font-weight: 300;
    color: #fff;
    margin-top: 5%;
    margin-bottom: 10px;
}
.content p {
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px;
    color: #aaa;
}
.navbar-expand-lg .navbar-collapse {
    margin:-7px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
    width: 1200px;
    margin-bottom: 480px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
    height: 500px;
    background-color: #777;
}

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 480px;
}

Answer 1

Put this rule to your class:

.carousel {
    max-width: 1200px;
    width: auto;
    margin: 0 auto 0 auto;
    text-align: center;
}