Сделал контейнер начальной загрузки 4 для получения формы заголовка, подобной этой
Но когда я пытаюсь сделать это с плавающей левой и правой плавающей точкой в начальной загрузке 4, это происходит 
с двумя контейнерами плавают влево и плавают вправо, как я видел в заголовке выше.
Мой код
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body style="background-image:
linear-gradient(to bottom, rgba(250, 231, 59, 0.52), rgba(129, 235, 8, 0.904)),
url('images/tree.png'); background-size: cover;background-attachment: fixed; height: 100%;">
<div class="container">
<div class="float-left w-25">
<ul class="navbar-nav">
<li class="nav-item"><a href="#"><img
src="images/fb.png"></a>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-10 offset-1">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="material-icons">menu</i>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="mx-auto navbar-nav">
<li class="nav-item ml-2">
<a href="#" class="nav-link btn-warning btn rounded">Home</a>
</li>
<li class="nav-item ml-3">
<a href="#" class="nav-link btn-warning btn">About us</a>
</li>
<li class="nav-item ml-3">
<a href="#" class="nav-link btn-warning btn">Product</a>
</li>
<li class="nav-item ml-3">
<a href="#">
<img src="images/mango.jpg" alt="Home" height="100" width="150">
</a>
</li>
<li class="nav-item ml-3">
<a href="#" class="nav-link btn-warning btn">Order Form</a>
</li>
<li class="nav-item ml-3">
<a href="#" class="nav-link btn-warning btn">Gallery</a>
</li>
<li class="nav-item ml-3">
<a href="#" class="nav-link btn-warning btn">Contect us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</body>
Пример показывает приведенное выше поведение только в полноэкранном режиме
Любая помощь будет оценена заранее, спасибо.