Please help; aligning image in nav bar

Hello, I’m trying to get the image in the nav bar to perfectly align to the buttons in the nav bar, but it keeps floating right above them for some reason. What could I do to fix this alignment?

code: https://codepen.io/daniel-albano/pen/ExaedBr?editors=1100

In your css file you added .top ul{display:block;} since an element with display:block; property always starts with a new line so use display:inline-block instead of display:block.

.top ul{
   display:inline-block;
}

.

When I use this all the objects align to the left of the nav bar. Is there a way to seperate it so the logo is aligned left and the text is aligned right? thanks!

there are two way to do this.

  1. add width property i.e.
.top ul{
width:80%;
}

At large screen use 80% width for .top ul since the logo width is 10% and you added padding to the logo.
for small screen use media query.

  1. add float property i.e.
.top ul{
   display:inline-block;
   float:right;
}
1 Like