Changing elements within a div makes other elements to change location
<p>I am having problems so I have made the code for my List items which is the menu bar on top. I added a picture, but when I did that the list items position moved downwards instead of to the right. I tried to set them position absolute but that didn't work. </p>

<p>HTML:-</p>

<pre><code>&lt;div id="header"&gt;
            &lt;img  class="quote" src="images/quote.png"/&gt;
            &lt;ul&gt;
                &lt;li class="li"&gt;
                    &lt;a href="store.html"&gt;Online store &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="li"&gt;
                    &lt;a href="beauty.html"&gt;Beauty &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="li"&gt;
                    &lt;a href="discover.html"&gt;Discover&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="li"&gt;
                    &lt;a href="men.html"&gt;Men&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="li"&gt;
                    &lt;a href="women.html"&gt;Women&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
</code></pre>

<p>CSS:-</p>

<pre><code>#header{
    background-color: #262626;
    height: 90px;
    width: ;
    position: relative;
}
#header ul{

}
#header ul li {
    display: block;
    list-style-type: none;
    display: inline-block;
    margin-top: 30px;
    margin-right: 80px;
    padding-right: 5px;
    padding-top: 10px;
    float: right;
}
#header ul li a{
    text-decoration: none;
    color: #ffffe6;
    font-family: medieval;
}
#header img{
    width: 200px;
    position: relative;
    margin-top: 20px;
}
</code></pre>