Have been trying to code a small website design, and have been caught up on this issue for a while. My nav area is below my example logo, and I need it to the right, however, I cannot get it there. I've tried floating, absolute positioning, and using col but I'm either doing it wrong or it's not working. 

My HTML Code:

```
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <!-- Logo, Search Bar, Categories, and User Profile -->
        <a href="index.html"> <img height="64px" width="313px" id="logopic" src="images/logoeg.png"> </a> <!-- LogoPic linking to HomePage -->
        <nav>
            <ul>
                <li><a href="#"> Home |</a></li>
                <li><a href="#"> Browse |</a></li>
                <li><a href="#"> Categories |</a></li>
                <li><a href="#"> Rising</a></li>
            </ul>
        </nav>
    </header>
</body>

```

My CSS Code:

```
header{
    background-color: #00829F;
    font-family: system-ui;
    color: white;
    font-size: 34px;
}
#logopic{
    padding-left: 10px;
    padding-bottom: 0px;
    padding-top: 5px;
}
    html, body{
    margin: 0px;
    padding: 0px;
}
ul {
    list-style-type: none;
}
li{
    display: inline;
}
a:link{
    color: white;
    text-decoration: none;
}
a:visited{
    color: white;
    text-decoration: none;
}
a:hover{
    color: white;
    text-decoration: none;
}
a:active{
    color: white;
    text-decoration: none;
}

```

[A picture of my page, showcasing the issue at hand.](https://i.stack.imgur.com/FTlgK.png)