How to make a menu stay in specific location. (Beginner)
<p>I am making a website for my family and I am stuck on how to make the menu stay at a specific place. I want it under the picture so it looks better. Also when I am resizing the browser the menu appears in a different place and the picture resizes also, I don't know how to fix that. Here is my code so far.</p>

<pre><code>&lt;!DOCTYPE html&gt;
</code></pre>

<p></p>

<pre><code>&lt;head&gt;
    &lt;title&gt;King Buffet&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="main.css"/&gt;
     &lt;img src="images/LOGO.png" /&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;ul&gt;&lt;a href="#/menu.html"&gt;Menu&lt;/a&gt;&lt;/ul&gt;
    &lt;ul&gt;&lt;a href="#/map.html"&gt;Map&lt;/a&gt;&lt;/ul&gt;
    &lt;ul&gt;&lt;a href="#/contact.html"&gt;Contact&lt;/a&gt;&lt;/ul&gt;
    &lt;ul&gt;&lt;a href="#/order-now.html"&gt;Order Now&lt;/a&gt;&lt;/ul&gt;

&lt;/body&gt;
</code></pre>

<p></p>

<pre><code>body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 500px;
box-shadow: 0 0 2px rgba(0,0)
}

img {
width: 50%;
height: auto;
position: fixed;
top: 15%;
left: 25%;
}

ul {
color: #fff200;
font-size: 20px;
font-weight: 600;
display: inline-block;

}
</code></pre>

<p><a href="https://i.stack.imgur.com/iZmJH.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/iZmJH.jpg" alt="enter image description here"></a></p>