Logo and Navbar links on same line - html

Question

I'm trying to get the logo and the nav bar links on the same line. The logo will appear by itself when it resizes to mobile.
This is the current:
Currently on two lines.
This is the html behind it:
<!-- header Area Start-->
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-12">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-10 text-right col-md-9 col-12">
<div class="responsive_menu"></div>
<div class="mainmenu-area">
<ul id="nav">
<li>Home <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Rocket Home </li>
<li>Gradient Home </li>
</ul>
</li>
<li>Domain</li>
<li>Hosting <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Hosting </li>
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
</ul>
</li>
<li>Pages <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
<li>Service</li>
<li>Blog Details</li>
<li>404 Page</li>
<li>Coming Soon</li>
</ul>
</li>
<li>Blog</li>
<li>Support</li>
</ul>
</div>
<div class="search">
<span class="search-trigger"><i class="fa fa-search"></i></span>
<div class="search-box">
<form action="#">
<input type="text" name="s" placeholder="Search..">
<div class="submit-btn">
<input type="submit" value="Go">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- header Area end-->
Any suggestions on what I can do to make them all on one line?

Answer 1

Maximum size of the column in bootstrap is 12. Bootstrap adds padding and margin by default, so try using col-lg-8 and see what happens.
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-8 text-right col-md-9">
<div class="responsive_menu"></div>
<div class="mainmenu-area">