title: How can I move this text up using CSS?
body: <p>How can I move up the classes <code>s1-text</code>and <code>s2-text</code>so they're under the class <code>shape</code> (photograph of me).</p>
  
  <p>I have tried using <code>margin-top: 10px</code> and <code>top</code>. However, nothing worked.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
        #nav_a {
        width:40%;
        }
        #nav_img {
        width:100%;
        height: 30px;
        margin-top: 10px;
        vertical-align: middle;
        }
        @media (min-width: 768px) {
        .navbar-nav.navbar-center {
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
        }
        }
        .body {
        font-family: 'Roboto', sans-serif;
        color: black;
        }
        .navbar.navbar-default {
        background-color: #FFFFFF;
        height: 10vh;
        z-index: 100;
        }
        .navbar.navbar-default ul {
        list-style-type: none;
        text-align: right;
        }
        .navbar.navbar-default ul li {
        display: inline-block;
        }
        .dropdown-menu li {
        text-align: center;
        }
        .dropdown .dropdown-menu {
        background-color: #FFFFFF;
        }
        .dropdown .dropdown-menu a {
        color: white;
        }
        .navbar.navbar-default ul li a {
        display: inline-block;
        padding: 3.5vh 8px 4px;
        color: black;
        text-decoration: none;
        font-size: 14pt;
        }
        .navbar.navbar-default ul li:after {
        content: '';
        position: absolute;
        right: 50%;
        bottom: 0;
        left: 50%;
        height: 3px;
        background-color: black;
        border-radius: 9px;
        transition: all .2s;
        }
        .nav.navbar-nav,
        .nav.navbar-nav&gt;li {
        float: none;
        }
        .navbar.navbar-default ul li:hover:after {
        right: 0;
        left: 0;
        }
        .navbar.navbar-default ul.dropdown-menu li,
        .navbar.navbar-default ul.dropdown-menu li a {
        position: relative;
        display: block;
        }
        .section {
        min-height: 100vh;
        }
        .one {
        background-color: #FFFFFF;
        }
        .two {
        background-color: #FFFFFF;
        }
        #sections .section {
        padding-top: 50px;
        }
        .hero {
        background: url("https://static.pexels.com/photos/38892/pexels-photo-38892.jpeg") center center no-repeat;
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        width: 100vw;
        height: 60%;
        }
        .shape {
        border-radius: 25px;
        background: #4D5061;
        content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
        color: white;
        height: 300px;
        margin: auto;
        padding: 3px;
        width: 300px;
        top: 15%;
        left: 50%;
        position: absolute;
        margin-left: -150px;
        z-index: 10;
        }
        .fa-angle-down {
        color: #0000;
        bottom: 0px;
        margin: 0 auto;
        }
        .fa-angle-up {
        color: #0000;
        bottom: 0px;
        margin: 0 auto;
        }
        .s1-text {
        text-align: center;
        color: black;
        z-index: 99;
        font-size: 18pt;
        }
        .s2-text {
        text-align: center;
        color: black;
        z-index: 99;
        font-size: 18pt;
        }
        .center-block {
        display: block;
        margin-right: auto;
        margin-top: 30px;
        margin-left: 20px;
        }
     &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
        &lt;script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     
     &lt;body&gt;
        &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
           &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                 &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                 &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                 &lt;span class="icon-bar"&gt;&lt;/span&gt;
                 &lt;span class="icon-bar"&gt;&lt;/span&gt;
                 &lt;span class="icon-bar"&gt;&lt;/span&gt;
                 &lt;/button&gt;
                 &lt;a id="nav_a" class="navbar-brand pull-left" href=""&gt;&lt;img id="nav_img" class="img-responsive" src="http://i1126.photobucket.com/albums/l611/ldocherty1/logo1_zpsep8qps5m.png" alt="Logo design"&gt;&lt;/a&gt;
                 &lt;h5 class="nav-title text-center center-block hidden-sm hidden-md hidden-lg" id="nav-center"&gt;Liam Docherty's Digital Portfolio&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                 &lt;ul class="nav navbar-nav navbar-center"&gt;
                    &lt;h5 class="nav-title text-center center-block hidden-xs "&gt;Liam Docherty's Digital Portfolio&lt;/h5&gt;
                 &lt;/ul&gt;
                 &lt;ul class="nav navbar-nav navbar-right"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="dropdown"&gt;
                       &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"&gt;Units &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                       &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Unit 6&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#section3"&gt;Unit 14&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Unit 7&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Unit 1&lt;/a&gt;
                          &lt;/li&gt;
                       &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class="dropdown"&gt;
                       &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;About &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                       &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;CV&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Education&lt;/a&gt;
                          &lt;/li&gt;
                       &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#contact-me"&gt;Contact Me&lt;/a&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/nav&gt;
        &lt;div id="sections"&gt;
           &lt;div class="section one"&gt;
              &lt;div class="shape"&gt;&lt;/div&gt;
              &lt;div class="hero"&gt;&lt;/div&gt;
              &lt;h1 class="s1-text center-block"&gt;WELCOME TO MY&lt;/h1&gt;
              &lt;h1 class="s2-text center-block"&gt;PORTFOLIO&lt;/h1&gt;
  
  
  
              &lt;a href="#section two"&gt; &lt;i class="fa fa-angle-down" style="font-size:100px;"&gt;&lt;/i&gt;&lt;/a&gt;
           &lt;/div&gt;
           &lt;section id="contact-me" class="section two"&gt;
  
  
  
              &lt;a href="#section one"&gt; &lt;i class="fa fa-angle-up" style="font-size:100px;"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;script&gt;
           $(document).ready(function() {
             $('#sections').fullpage();
           });
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>