Aligning multiple images in a single <div> element - html

Question

I'm trying to align multiple images in a single div element which is <nav_bar>. These images will act as navigation links to the different webpages on the website. The problem is, initially I was able to position the (home) image using values I put into the css. However, when I put the second image (computericon), it went behind the (home) image. TO fix this, I gave them position: inline; property. Now I can't move either of the images to my liking. They're just stuck there. No amount of padding or margin adjustment is making them move. The fix to this is surely easy but I'm quite new to website design and development and so I cannot seem to get around this issue. Any sort of help would be greatly appreciated.
Thank You.
Here's the html code:
<div id = "nav_bar">
<img id= "home" src= "home.png" height= "50px" width= "70px">
<img id= "pc" src= "computericon.png" height= "50px" width= "70px">
</div>
And here's the CSS code:
#home {
left: 188px;
position: inline;
}
#MAIN_CONTENT_CONTAINER {
padding-top: 20px;
}
#nav_bar {
height: 60px;
background-color: #3c3c3c;
margin-left: 10px;
}
#home:hover {
background-color: #b4e1cf;
position: inline;
}
#computericon {
left: 80px;
position: inline;
}
Image is attached.The two icons are just stuck there.

Answer 1

Try:
position: relative;
float: left;
Add div with style display:block;clear:both right after these images (to clear floats).
Remove the left property.

Answer 2

There is no such thing as position: inline;.
You should use position: relative; but then the left coordinate will count from the box-side of the previous element.
Depending on what you need to achieve, it may be better to use
display: inline-block;
vertical-align: middle;
on them, use only margins or paddings and forget left and such.

Answer 3

I think that one of your problems is that you were calling your second image with the wrong id. I changed the id to what you were calling it as in the css and then added a class to both of the nav items. Is this what you were looking for?
#MAIN_CONTENT_CONTAINER {
padding-top: 20px;
}
#nav_bar {
height: 60px;
background-color: #3c3c3c;
margin-left: 10px;
}
.navItem {
margin-left: 20px;
margin-top: 5px
}
.navItem:hover {
background-color: #b4e1cf;
}
<div id = "nav_bar">
<img id="home" class="navItem" src= "home.png" height= "50px" width= "70px">
<img id="computericon" class="navItem" src= "computericon.png" height= "50px" width= "70px">
</div>
Hope this helped!

Answer 4

First off, it's always a good idea when you're asking something to include a JSFiddle instead of just pasting the whole code in the answer. I did it for you and took the liberty of changing the images to better show the result: https://jsfiddle.net/2fjg6g3r/
The right choice would be inline-block, what I used in the fiddle.
#nav_bar > img {
display: inline-block;
height: 100%;
width: auto;
margin-right: 5px;
}
I also noticed you're selecting a single element at a time, so I'd suggest taking a look at more CSS selectors to make your code cleaner and less repetitive.