title: HTML Formatting error with Bootstrap and Angular JS
body: <p><a href="https://i.stack.imgur.com/FehRe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FehRe.jpg" alt="Target"></a></p>
  
  <p><a href="https://i.stack.imgur.com/xbNEM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xbNEM.png" alt="Current"></a></p>
  
  <p>The first picture is the design I want to replicate, and the second picture is my current draft. I've been stuck on formatting issues for a long time now, and I'm hoping that someone from the community can help me.</p>
  
  <p>As you can see from the second picture, there is some weird formatting error. I believe it might something related to the ng scope. </p>
  
  <p>Here is my html code (with the css styles)</p>
  
  <pre><code>&lt;style&gt;
  .index #contactsid-app-view 
    {
      background: url(/images/background.png) no-repeat center center fixed !important; 
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
  
    }
    .header{ display:none !important;}
  
  
    .navbar-inverse
    {
      background-color: #00003D; 
    }
  
  .navbar .divider-vertical {
    height: 50px;
    margin: 0 9px;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
  }
  
  .navbar-inverse .divider-vertical {
    border-right-color: #222222;
    border-left-color: #111111;
  }
  
  @media (max-width: 767px) {
  .navbar-collapse .nav &gt; .divider-vertical {
      display: none;
    }
  }
  
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
    &lt;footer&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-text pull-left" id="footer-body"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;COMMUNITY CONTENT&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  
      &lt;div class="col-md-6"&gt;
        &lt;img src="/images/hid-logo-print.png" style="width:100%; height:100%"&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-6" style=" background-color: rgba(84, 177, 200, .76);
        border-radius: 10px;
        border: 1px solid #6cbdd4;
        "&gt;
             &lt;iframe src="//player.vimeo.com/video/119424883" margin="5%" width="100%" height="100%" frameborder="0" title="Introducing Humanitarian ID" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
              &lt;a class="btn btn-lg btn-primary btn-arrow btn-block" href="/#login"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt;&lt;span translate&gt;Logiin&lt;/span&gt;&lt;/a&gt;
              &lt;a class="btn btn-lg btn-primary btn-arrow btn-block" href="/#register"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt;&lt;span translate&gt;Register&lt;/span&gt;&lt;/a&gt;
              &lt;a class="btn btn-lg btn-primary btn-arrow btn-block" href="/#about"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt;&lt;span translate&gt;About&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Background info: The web app uses Angular.js and Bootstrap</p>