Aligning An Image Next To An Unordered List Horizontally

So i'm trying to have an image alongside an unordered list (image acting as home button for the navigation) however the actual list keep shifting down, when I want it to be next to

Solution 1:

You can add display: flex to the parent and it will put them in a flex row.

#navigation {
    height: 50px;
    width: 100%;
    background-color: #2F4E6F;
  display: flex;
}

#navigation li a {
    text-decoration: none;
    font-family: 'Open Sans';
    font-size: 25px;
    color: #FFFFFF;
}

#navigation li a:hover {
    color: #7c7f84;
    border-bottom: solid black 2px;
}

#navigation li {
    list-style-type: none;
    display: inline-block;
    padding: 0 10px;
    background-color: red;
}

#home_button {
    width: 45px;
    height: 45px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 2px;
}   

<div id="navigation">
  <a href="#"><img src="images/home_button.png" alt="Image representing a home icon" id="home_button"></a>
  <ul>
    <li><a href="#">Phantom of the Opera</a></li>
    <li><a href="#">The Lion King</a></li>
    <li><a href="#">Wicked</a></li>
    <li><a href="#">Bookings</a></li>
    <li><a href='#'>Location</a></li>
  </ul>
</div>

Solution 2:

Try using the float property in your CSS. This will allow the elements to be displayed alongside eachother.

Add the line float:left; to the CSS of #home-button, and add float:right to your unordered list.