Styling logo and navbar

HTML-CSS
1

Tell us what’s happening:

My header’s nav-bar is smooshed to the right corner and cut off I would like it to look more like my footer’s nav bar or like the demo. I think my issue is with how I’m implementing the logo. But I’ve tried and I’m not really sure how to style the header so the nav bar is fixed on the right and the logo on the left without it coming put wonky. Any advice would be great!

https://codepen.io/Shukri-Isse/pen/WbNKZvr

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

Product Landing Page - Build a Product Landing Page

3

Definitely do not add margin-right: 1000px; to the logo text element.

Remove that and change the justify-content on #nav-bar to space-between to push the two flex items to the far left and right. Then add a bit of left/right padding to the flex container, if you want to limit how far the nav items can go to the left/right also give it a max width and an auto margin.

Example 
#header-logo {
/*   margin-right: 1000px; */
  font-size: 25px;
}

#nav-bar {
  display: flex;
  top: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-inline: auto;
  width: min(1200px, 85%);
}
1 Like
4

Thank you * 1000! I am always struggling with styling navbars. I guess I need some more practice. Do you have any advice on how I could improve?

5

Keep practicing, it is just a matter of doing it enough times.

1 Like