Custom Code CMS page header collapsed

Here is my cms page code,

<!doctype html> <html lang="en">   <head>     <!-- Required meta tags -->     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">     <link href="https://mdbootstrap.com/legacy/4.3.2/assets/compiled.min.css" rel="stylesheet" id="bootstrap-css">     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet" id="bootstrap-css">     <title>Social Media </title>   </head>   <body>      <div class="container">         <div class="list-group-item list-group-item-success"><h1>Abc</h1></div>         <div class="row jumbotron style="padding-left: 5px;"">              <div class="col" >                  <a type="button" href="https://www.facebook.com/abc/" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</a>             </div>              <div class="col">                 <a type="button"  href="https://twitter.com/abc" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</a>             </div>              <div class="col">                 <a href="https://www.instagram.com/abc/" type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</a>             </div>              <div class="col">                 <a href="https://www.pinterest.com/abc/" type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</a>             </div>                      <div class="col">                 <a href="https://www.youtube.com/channel/abc" type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</a>             </div>       <!--        <div class="col">                 <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button>             </div> -->         </div>                 <div class="list-group-item list-group-item-success"><h1>abc</h1></div>           <div class="row jumbotron style="padding-left: 5px;"">              <div class="col" >                  <a type="button" href="https://www.facebook.com/abc/" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</a>             </div>              <div class="col">                 <a type="button"  href="https://twitter.com/abc" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</a>             </div>              <div class="col">                 <a href="https://www.instagram.com/abc/" type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</a>             </div>              <div class="col">                 <a href="https://www.pinterest.com/abc/" type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</a>             </div>                      <div class="col">                 <a href="https://www.youtube.com/channel/abc" type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</a>             </div>       <!--        <div class="col">                 <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button>             </div> -->         </div>          <div class="list-group-item list-group-item-success"><h1>abc</h1></div>       <div class="row jumbotron style="padding-left: 5px;"">              <div class="col" >                  <a type="button" href="https://www.facebook.com/abc" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</a>             </div>              <div class="col">                 <a type="button"  href="https://twitter.com/abc" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</a>             </div>              <div class="col">                 <a href="https://www.instagram.com/abc/" type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</a>             </div>              <div class="col">                 <a href="https://www.pinterest.com/abc/" type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</a>             </div>                      <div class="col">                 <a href="https://www.youtube.com/channel/abc" type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</a>             </div>       <!--        <div class="col">                 <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button>             </div> -->         </div>         </div>                        <!-- Optional JavaScript -->     <!-- jQuery first, then Popper.js, then Bootstrap JS -->     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>   </body> </html> 

The code working good, but page header looks like unalignment.