CP_menu_bootstrap

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Grass World Sport News</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">World Cup</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sports</a>
      </li>    
       <li class="nav-item">
        <a class="nav-link" href="#">Schedule</a>
      </li>   
       <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>   
    </ul>
  </div>  
</nav>
  <img src="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=100" height="100px" class="max-width w-100"/>

CSS

html,body{
    background-color: #5f5f5f;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

div.container{
    max-width: 1200px;
    margin: 0;
    padding: 0 30px;
}

header{
    background-color: #000000;
    float: left;
    width: 100%;
}

header h1{
    color: #ffffff;
    CP_menu_orig - JSFiddle[16];
    text-transform: uppercase;
    float: left;
}

header ul{
    list-style-type: none;
    padding: 0;
    margin: 22px 0 0 0;
    float: right;
    
}

header ul li{
    display: inline-block;
    text-decoration: underline;
}

header li a:hover{
    color: #D3D3D3
}

header ul li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px;
    display: block;
}

.banner-image {
    width: 100%;
    
}