HTML CSS Banner Alignment - html

Question

Can someone please help me out why my "desc" content is not right under my title in the banner? I have posted my CSS and HTML code. I have also posted the photo of how the outcome looks.
#bannerBottom {
border: 5px #0087dd solid;
margin-top: 30px;
margin-bottom: 50px;
}
#bannerImg {
width: 150px;
margin-top: 7px;
margin-left: 10px;
display: inline-block;
}
#bannerContent {
display: inline-block;
vertical-align: top;
margin-left: 20px;
}
#bannerContent>span {
font-size: 20px;
font-weight: bold;
font-family: arial;
color: steelblue;
display: inline-block;
}
#desc {
font-family: arial;
display: inline-block;
margin-left: 190px;
}
<div id="bannerBottom">
<img id="bannerImg" src="http://www.placehold.it/100x100">
<p id="bannerContent">
<span>The Big 3 - HTML, CSS, JavaScript</span>
</p>
<p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p>
</div>

Answer 1

You can float your image left instead of making it an inline-block element. Also there'd be no need to make the paragraph an inline-block either.
#bannerBottom {
border: 5px #0087dd solid;
margin-top: 30px;
margin-bottom: 50px;
}
#bannerImg {
width: 150px;
margin-top: 7px;
margin-left: 10px;
float: left;
}
#bannerContent {
display: inline-block;
vertical-align: top;
margin-left: 20px;
}
#bannerContent>span {
font-size: 20px;
font-weight: bold;
font-family: arial;
color: steelblue;
display: inline-block;
}
#desc {
font-family: arial;
margin-left: 190px;
}
<div id="bannerBottom">
<img id="bannerImg" src="http://www.placehold.it/100x100">
<p id="bannerContent">
<span>The Big 3 - HTML, CSS, JavaScript</span>
</p>
<p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p>
</div>

Answer 2

Surely it is because you have:
#desc {
margin-left: 190px;
}
... which means the box isn't fitting under the title, so it is getting shunted underneath. Either way, float the image left and don't have margin-left.

Answer 3

try this:
<div id="bannerBottom">
<div class="container-banner-img">
<img id="bannerImg" src="http://www.placehold.it/100x100">
</div>
<div class="container-banner-content">
<p id="bannerContent">
<span>The Big 3 - HTML, CSS, JavaScript</span>
</p>
<p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!
</p>
</div>
</div>
CSS
#bannerBottom {
border: 5px #0087dd solid;
margin-top: 30px;
margin-bottom: 50px;
}
#bannerImg {
width: 150px;
margin-top: 7px;
margin-left: 10px;
display: inline-block;
}
#bannerContent {
display: inline-block;
vertical-align: top;
margin-left: 20px;
}
#bannerContent>span {
font-size: 20px;
font-weight: bold;
font-family: arial;
color: steelblue;
display: inline-block;
}
#desc {
font-family: arial;
display: inline-block;
margin-left: 190px;
}
.container-banner-img {
float: left; /* <- pay attention on this line */
width:25%;
}
.container-banner-content{
width: 70%;
}
}

Answer 4

If you don't want to go the flexbox route you can float the image and keep your heading and description block level.
I took a few liberties with the markup and CSS selectors, changing them from IDs to classes and other improvements to streamline everything.
.entry {
font-family: Arial, sans-serif;
border: 5px solid #0087dd;
margin: 30px 0;
}
.entry-img {
float: left;
max-width: 150px;
margin: 10px;
}
.entry-title {
font-size: 20px;
color: steelblue;
}
.entry-desc {
margin: 10px;
}
<div class="entry">
<img class="entry-img" src="http://www.placehold.it/100x100">
<h2 class="entry-title">The Big 3 - HTML, CSS, JavaScript</h2>
<p class="entry-desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p>
</div>