Home>

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--->
    
      <ol>
          <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>
      </ol>
        
          <!--- slide1--->
            
                
                    Yukawa-architects
                    Click here for works
                
            
          <!---slider2--->
            
                
                    Yukawa-architects
                    about us
                
            
          <!---slider3--->
            
                
                    Yukawa-architects
                    About the team
                
            
      <!--- end carousel--->
      <!---prev next button-->
        
            
              <span aria-hidden="true"></span>
            
            
              <span aria-hidden="true"></span>
            
        
     
   <!--- end image slider--->
/*---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;
  }
.slider-wrapper{
    z-index: 1;
}
.prevnext-btn{
    z-index: 2;
}
.slider-doc{
    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;,
position:relative
left:0
right:0
margin:0 auto
I tried, but it didn't work.