title: How do I move the text up in CSS?
body: <p>I'm trying to move my text up so that it's not in the center of the page. I would like to move the text &quot;GET YOUR LICENSE &amp; PERMIT BONDS FAST &amp; EASY&quot; up a little bit on my split-screen. I tried top and bottom px but that isn't working. I just would like it to move up a little bit. Any help will be greatly appreciated!</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>body {
      margin:0;
      padding: 0;
      font-family: "Open+Sans", sans-serif;
   }
  
   .navbar {
      border-bottom: 2px solid #0C133C;
   }
   
   
   #nav {
       background-color: #fff; 
       color: white;
       width: 100%;
   
   }
   .nav {
     float: right;
       text-align: left;
     margin: 0;
   }
   .nav &gt; li {                                                             
       display:Inline-block;
       padding: 20px 50px 10px 9px;                              
   }
   
  .nav &gt; li a {                                               
      text-decoration: none;
      color: #0C133C;
      font-size: 18px;
      border-bottom: 3px solid transparent;
  
  }
  .clearer {
      clear:both;
  }
  
  .subnav class{
    margin: 0;
  position:relative;
  }
  
   .subnav &gt; div a {                                               
       text-decoration: none;
       color: #0C133C;
       font-size: 18px;
  padding: 20px 30px 10px 9px;
  }
    
  .logo {
  margin-top: 1rem;
  }
  
  .subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem; 
  
  }
  
  .split {
    height: 70%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: -50;
    overflow-x: hidden;
    padding-top: 20px;
  }
  
  
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .left {
    left: 0;
    background-color: #282C41;
  color: white;
  margin-top: .5rem;
   font-size: 15px;
  }
  h1 {
  line-height: 1.2;
  font-size: 40px;
  bottom: 20px;
  }
   
  .right {
    right: 0;
    background-color: #CDCDCD;
  margin-top: .5rem;
  font-size: 18px;
  }
  
  
  input[type=text], select {
  position: relative;
  left: 140px;
    width: 50%;
    padding: 12px 20px;
    margin: 3px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .button: {
  position: relative;
  left: 140px;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Navbar&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"
      
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="navbar"&gt;
              &lt;ul class="nav"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link active" aria-current="page" href="#"&gt;Contact Us&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link active" aria-current="page" href="#"&gt;Sign In&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="clearer"&gt;&lt;/div&gt;
          &lt;/div&gt;
          
  
  &lt;subnav class="subnav subnav-light bg-light"&gt;
  &lt;img src="universallogo.jpg" class="logo"/&gt;
  &lt;div class="container-fluid"&gt;
  &lt;a class="subnav=brand" href="#"&gt;
   &lt;a class="nav-link active" aria-current="page" href="#"&gt;Bonds&lt;/a&gt;
  &lt;/a&gt;
   &lt;a class="nav-link active" aria-current="page" href="#"&gt;Report a Claim&lt;/a&gt;
   &lt;a class="nav-link active" aria-current="page" href="#"&gt;About Us&lt;/a&gt;
  &lt;a class="nav-link active" aria-current="page" href="#"&gt;Search&lt;/a&gt;
  &lt;/div&gt;
  &lt;/subnav&gt;
   
  
  &lt;div class="split left"&gt;
    &lt;div class="centered"&gt;
      &lt;h1&gt;GET YOUR LICENSE &amp; PERMIT BONDS FAST &amp; EASY&lt;/h1&gt;
      &lt;p&gt;We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
  &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="split right"&gt;
  
  
  &lt;form name="form1" id="form1" action="/action_page.php"&gt;
    &lt;select name="subject" id="subject"&gt;
      &lt;option value="" selected="selected"&gt;Select Your State&lt;/option&gt;
        &lt;option value="California"&gt;California&lt;/option&gt;
        &lt;option value="California"&gt;Illinois&lt;/option&gt;
        &lt;option value="California"&gt;Michigan&lt;/option&gt;
        &lt;option value="California"&gt;Ohio&lt;/option&gt;
      &lt;/select&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;select name="topic" id="topic"&gt;
      &lt;option value="" selected="selected"&gt;Who is requring the bond&lt;/option&gt;
    &lt;/select&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;select name="chapter" id="chapter"&gt;
      &lt;option value="" selected="selected"&gt;What jurisdiction is requring the bond&lt;/option&gt;
    &lt;/select&gt;
    &lt;br&gt;&lt;br&gt;
       &lt;select name="chapter" id="chapter"&gt;
      &lt;option value="" selected="selected"&gt;Select Your Bond&lt;/option&gt;
    &lt;/select&gt;
  &lt;br&gt;&lt;br&gt;
  
  &lt;/form&gt;
  
   &lt;form action="/action_page.php"&gt;
    &lt;input type="text" id="date" name="startdate" placeholder="Effective Start Date"&gt;
  
  &lt;br&gt;&lt;br&gt;
    &lt;input type="text" id="email" name="typeemail" placeholder=" Type E-mail"&gt;
  &lt;/form&gt;
  
  &lt;button type="button"&gt;Click Me!&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/7va0F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7va0F.png" alt="My text that I want to move up a little bit" /></a></p>