<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Kanit:800|Open+Sans" rel="stylesheet"> <div id="banner"> <h1>MGLS Media</h1> </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Portfollio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> <div class="container"><div class="row"> <div class="col-sm-3"> <h3>Column 1</h3> <p>Lorem ipsum dolor..</p> <p>Ut enim ad..</p> </div> <div class="col-sm-9"> <h3>Column 2</h3> <p>Lorem ipsum dolor..</p> <p>Ut enim ad..</p> </div> </div></div>

#banner{ background-color: #595959; padding: 2rem 1rem 1rem 1rem; } h1 { font-family: 'Kanit', sans-serif; font-size: 5rem; color: #fff; }