Align the navbar-brand to left of page - navbar

Question

How do I align the navbar-brand to the left of the page? I would like my Website Name to be in the same line with the menu list.
This is my current menu bar:
Current Navigation Bar
Notice, in my Current Navigation Bar, my Website Name is above the menu list.
Here is my code saved at Bootply.com:
https://www.bootply.com/ksxCEDHXPo
Many thanks.

Answer 1

I figured it out. I wanted my menu to look like this:
Click here for my expected navigation menu
I needed to put the column span to the navbar-brand and navbar-collapse parameter.
This was my code before:
Website Name
</div>
<div class="collapse navbar-collapse" id="myNavbar">
Here is my code for the update:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 col-md-4" href="#">Awesome Theme</a>
</div> <!-- nav-header -->
<div class="collapse navbar-collapse col-md-8" id="myNavbar">
<?php
wp_nav_menu(array(
'theme_location'=>'primary',
'container' => false,
'menu_class'=>'nav navbar-nav navbar-right'
)
);
?>
</div><!-- collapse -->
</div><!-- container-fluid -->
</nav>
For more information on columns check out the site below:
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp