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;
}

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

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

#navigationli {
    list-style-type: none;
    display: inline-block;
    padding: 010px;
    background-color: red;
}

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

<divid="navigation"><ahref="#"><imgsrc="images/home_button.png"alt="Image representing a home icon"id="home_button"></a><ul><li><ahref="#">Phantom of the Opera</a></li><li><ahref="#">The Lion King</a></li><li><ahref="#">Wicked</a></li><li><ahref="#">Bookings</a></li><li><ahref='#'>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.