I want to move the text of P tag and a tag using @media.

I can't move.
Since font-size etc. are reflected, I think @media itself is effective.

I want to display .carousel-caption h1 and .btn-flat-border in the center of the page.

Applicable source code
<!--- start image slider--->
          <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          <!--- slide1--->
                    Click here for works
                    about us
                    About the team
      <!--- end carousel--->
      <!---prev next button-->
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
   <!--- end image slider--->
.carousel-item {
    height: 100vh;
    background-size: cover;

.carousel-caption h1 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
    color: #FFFFFF;
.btn-flat-border {
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 25px;
    padding: 0.2em 0.6em;
    text-decoration: none;
    text-shadow: .1rem .1rem .1rem black;
    color: #FFFFFF;
    border: solid 2px #FFFFFF;
    border-radius: 3px;
    transition: .4s;
    margin-top: 50px;
  .btn-flat-border:hover {
    background: #FFFFFF;
    color: black;
    text-shadow: none;
    z-index: 1;
    z-index: 2;
    position: relative;
    top: 400px;
    left: -200px;
/*---media queries---*/
@media (max-width: 767px) {
    .slider-wrapper {
        margin: 0 auto 2rem;
    .carousel-caption h1 {
        text-align: center;
        font-size: 2.3rem;
        letter-spacing: .1rem;
        padding-bottom: .5rem;

    .btn-flat-border {
    .narrow h1 {
        font-size: 1.5rem;
    p.lead {
        font-size: 1rem;
What I tried

text-align: center;,
margin:0 auto
I tried, but it didn't work.