Product Landing Page #nav-bar positioning

HTML-CSS
1

Tell us what’s happening:
I am having trouble with the positioning of my nav bar. I can’t figure out how to get the nav links to be positioned inside the header and aligned with the image and title. I have tried messing around with the margin and padding properties and that isn’t working. If I position: relative; the header and position: absolute; the nav bar it works but then the header doesn’t stay fixed at the top. So yeah, despite googling and looking at various articles and questions on stack overflow I am still stuck. Any info to point me in the right direction would be much appreciated. Here is a link to my project https://codepen.io/Riddle350/pen/XWmvmvL

Your code so far
this is the CSS that I currently have for everything that comprises the header.

#header {
height: 31%;
width: 100%;
background: lightgray;
position: fixed;
top: 0px;
left: 0px;
z-index: 1;
}

#header-img {
width: 150px;
float: left;
}

#nav-bar {
float: right;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

use display: flex, and set it to row and try playing with padding and margin next . also set ur image height to 100%.