Q: Padding comand is it not working, I can't make spaces between sections `


/* Style by CSS */

html,
body {
 height: 100%;
}

img{
 max-width: 100%;
}

/* Cover */

#cover {
 background: #222 url("../images/123.jpg") center center no-repeat;
 background-size: cover;
 color: white;
 height: 100%;
 text-align: center;
 display: flex;
 align-items: center;
}

#cover-caption  {
    width: 100%;
}

#cover form {
 justify-content: center;
}

.carousel-inner > .carousel-item > img {
    width: 100%;
    height: 100%;
}

.section-content {
 padding: 5rem 0 0;
}

#about {
 background: url('../images/girlincar.jpg') center center no-repeat;
 background-size: cover;
 text-align: center;
}

.about-text {
 background: rgba(0,0,0,0.8);
 color: white;
 padding-top: 1.875rem;
}
  <!DOCTYPE html>
  <html lang="ro">
  <head><!--STARTING HEADING-->

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <!--Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

  </head><!--ENDING HEADING-->

  <body><!--STARTING BODY-->

    <section id="cover">
      <div id="cover-caption">
        <div class="container-fluid">
          <div class="col-sm-10 offset-sm-1">
            <h1 class="display-3">Bun Venit pe site-ul nostru!</h1>
            <p>Ma bucur mult ca ati trecut pe aici, in momentul de fata inca invatam cum sa construim un site si cum sa ne atragem clientii intr-un mediu virtual, indiferent de experienta noastra in vanzari, satisfacerea nevoilor clientului,marketing sau pur si simplu, completarea proiectului dumneavoastra cu MOBILA de calitate, in mediul online, mereu ai ceva de invatat.</p>




                    
                      <form action="" class="d-flex justify-content-center form-inline">
                        <div class="form-group">
                        <label class="sr-only">Name</label>
                        <input type="text" class="form-control form-control-lg" placeholder="Jane Doe">
                        </div>

                        <div class="form-group">
                        <label class="sr-only">E-mail</label>
                        <input type="text" class="form-control form-control-lg" placeholder="Jane.Doe@Example.com">
                        </div>

                        <button type="submit" class="btn btn-success">Okay, go!</button> 
                      </form> 
                   
                    <br>

                    <a href="#nav-main" class="btn btn-outline-secondary btn-sm" role="button">&darr;</a>
                  </div>
                </div>
              </div>  
            </section>            


            <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-full" id="nav-main">
             <a class="navbar-brand" href="#">
               <img src="dre.png" width="30" height="30" class="d-inline-block align-top" alt="">
             </a>
             <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">S.C. MOBPROSIM S.R.L</a>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ACASA <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">PRODUSE</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">DESPRE NOI</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">CONTACT</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="CAUTA">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">CAUTA</button>
              </form>
            </div>
          </nav>

          <section id="carousel">
            <div id="carousel-home" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-home" data-slide-to="1"></li>
                <li data-target="#carousel-home" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                  <img src="assets/images/hearthand.jpg" alt="Love is in the air">
                  <div class="carousel-caption d-none d-md-block">
                    <h3>CALITATE</h3>
                    <p>Noi garantam calitatea produselor noastre.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img src="assets/images/woman-camera.jpg" alt="Music is my life">
                  <div class="carousel-caption d-none d-md-block">
                    <h3>ORIGINALITATE</h3>
                    <p>Stilul clasic nu are pereche.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img src="assets/images/banjo.jpg" alt="Instruments everywhere">
                  <div class="carousel-caption d-none d-md-block">
                    <h3>FUNCTIONABILITATE</h3>
                    <p>Usor de transportat, usor de montat, usor de apreciat.</p>
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </section>

          <section id="what-we-do">
            <div class="section-content">
              <div class="container">
                  <h2>What we do</h2>
                  <div class="card-deck">
                    <p class="lead">Lorem ipsum dolor sit amet, consectetu adipisicing elit, sed do eiusmod
                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="card-deck">
                        <div class="card" style="width: 5rem;">
                          <div class="card-block">
                            <h4 class="card-title">Strategy &amp; Planning</h4>
                            <h6 class="card-subtitle">Support card subtitle</h6>
                          </div>
                          <img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
                          <div class="card-block">
                            <h4 class="card-title">Card title</h4>
                            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                            <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
                            </button>
                          </div>
                        </div>
                        <div class="card" style="width: 20rem;">
                          <div class="card-block">
                           <h4 class="card-title">Creative &amp; Design</h4>
                           <h6 class="card-subtitle">Support card subtitle</h6>
                         </div>
                         <img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
                         <div class="card-block">
                          <h4 class="card-title">Card title</h4>
                          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                          <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
                          </button>
                        </div>
                      </div>
                      <div class="card" style="width: 20rem;">
                        <div class="card-block">
                         <h4 class="card-title">Creative &amp; Design</h4>
                         <h6 class="card-subtitle">Support card subtitle</h6>
                       </div>
                       <img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
                       <div class="card-block">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>


        <section id="about">
          <div class="section content">
            <div class="container">
              <div class="col-md-6">
                <div class="about-text">
                    <h3>About us</h3>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <h5>Follow me on the web</h5>
                    <a href="" class="btn btn-sm btn-outline-secondary">Facebook</a>
                    <a href="" class="btn btn-sm btn-outline-secondary">Instagram</a>
                    <a href="" class="btn btn-sm btn-outline-secondary">Linkdel</a>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
      </body>
      </html>


`https://imgur.com/a/kKaDU - Check the picture!
I am really new to web designing, an right now I am working on my first bootstrap 4 project. Everything is almost good, but the "padding" command for top spaces in css3 is not working. I want to make a gap by 80px ( 5rem ) between two sections, and I don't have a clue why is it not working. I am using sublimetext3 forwriting and google chrome for implementing. Code below.
 <section id="what-we-do">
            <div class="section-content">
              <div class="container">
                  <h2>What we do</h2>
                  <div class="card-deck">
                    <p class="lead">Lorem ipsum dolor sit amet, consectetu adipisicing elit, sed do eiusmod
                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="card-deck">
                        <div class="card" style="width: 5rem;">
                          <div class="card-block">
                            <h4 class="card-title">Strategy &amp; Planning</h4>
                            <h6 class="card-subtitle">Support card subtitle</h6>
                          </div>

And the CSS code:
.section-content {
    padding: 5rem 0;
}


A: Try using margins instead of paddings.

A: So in the code snippet you provided, the "What we do" section has correct padding. The next section "About us" does not just because you have a typo in the class name section-content vs section content (missing dash). Your screenshot shows that you are also missing padding on the "What we do" but I can't help you with that, because you did not replicate it in the snippet.

A: HI i reviewed your code padding-top is working fine but the problem is padding is used for maintaining space or gap with in the box only.if u want maintain space between two blocks u should have to use margin or u can assign padding to #about section that will also work .
