How to align top-bar items with row - html

Question

I have a header.top-bar element at the top (with div.top-bar-left and div.top-bar-right elements inside), then everything after that is inside a div.row element. What's the simplest way to make the items in the top bar line up with the edges of the row? I tried putting the header itself inside a row but that just completely messed up the placement of everything.

Answer 1

<div class="container">
// place your html code here
</div>
Check this!
<!-- Navigation Start -->
<nav class="navbar navbar-default navbar-fixed-top">
<!-- Container Start -->
<div class="container">
<!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar -->
<div id="navbar">
<form class="navbar-form navbar-right">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-left">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Container End -->
</nav>
<!-- Navigation End-->

Answer 2

Put the row and top-bar in a div and use flex-property
<div class="container">
<div class="top-bar">
</div>
<div class="row">
</div>
</div>
.container{
display:flex;
flex-direction:column;
}