Align image inside a navbar div - html

Question

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<div> <img src="images/logo.png" /></div>
<h1><span>SUJALA WELLNESS</span> </h1>
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">KYK India</li>
<li role="presentation">Health Benefits</li>
<li role="presentation">Certifications</li>
<li role="presentation">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
How do i resize the logo? I want it in same dimensions as navbar. click here to open image
I want the logo to be inside the nav bar and the company's name beside it. How do I align the image and the text. It's ok if the content overlaps the div tag.

Answer 1

I refactored your code a little bit and tried to do it with flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.navbar {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid gray;
padding: 10px;
}
.navbar__left,
.navbar__right,
.navbar__list {
display: flex;
flex-direction: row;
align-items: center;
}
.navbar__logo {
width: 150px;
height: 100px;
}
.navbar__title {
margin-left: 10px;
}
.navbar__list-item {
list-style: none;
margin-right: 20px;
}
<nav class="navbar">
<div class="navbar__left">
<img class="navbar__logo" src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" alt="logo">
<span class="navbar__title">My Company</span>
</div>
<div class="navbar__right">
<ul class="navbar__list" role="tablist">
<li class="navbar__list-item" role="presentation">Home</li>
<li class="navbar__list-item" role="presentation">KYK India</li>
<li class="navbar__list-item" role="presentation">Health Benefits</li>
<li class="navbar__list-item" role="presentation">Certifications</li>
<li class="navbar__list-item" role="presentation">Contact</li>
</ul>
</div>
</nav>

Answer 2

<div class="navbar-brand">
<span><img src="images/logo.png"/></span>
SUJALA WELLNES
</div>
If necessary, set a height: ...px; on .navbar-brand img in your stylesheet. Don't use <h1> because h tags default to inline-block and thus start on a new line