A horizontal navigation bar in a div
<p>I've been creating a webpage for my cse homework...and I want to have a navigation bar at early of the site...Instead, I got this <a href="https://i.stack.imgur.com/k9B13.jpg" rel="nofollow">nav bar below the borderline where it supposed to be.</a></p>

<p>here's the code `</p>

<pre><code>&lt;body style="background: linear-gradient(#c3c3e5, #f1f0ff);"&gt;
&lt;style&gt;

#title {
    font-family:courier;
    font-size:40px;
    text-align:center;
    text-transform:uppercase;
    border:2px solid black;
    border-radius:30px;
    background-color:#443266;
}

#Welcome {
    font-family:courier;
    font-size:30px;
    text-align:center;
    text-decoration:underline;
    text-decoration: bold;
}

#q {
    font-family:courier;
    font-size:25px;
    text-align:justify;
    text-decoration:none;
}

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

li {
    float:right;
}

li a {
    display:inline-block;

    text-decoration:none;
    background-color:black;
    color:white;
}

#audio {
    float:right;
    display:inline-block;
    background-color:lightblue;
}

&lt;/style&gt;

    &lt;div id="title"&gt;
    &lt;p&gt;Star Travel&lt;/p&gt;

    &lt;audio controls autoplay loop id="audio"&gt;
        &lt;source src="../assets/audio/13_Fairy Law.mp3" type="audio/mpeg"&gt;
    &lt;/audio&gt;
    &lt;br&gt;
    &lt;br&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="user-rev.html"&gt;Review&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="trip-accom.html"&gt;Accomodation&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="site-trip.html"&gt;Trip&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="main.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>`</p>

<p>please help me
thanks in advance</p>