Nav bar disappears when float:right; is added

1

Currently my nav bar is sitting in the top middle of my page, i am trying to push it to the right, but when i add float:right; the nav bar disappears completely.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0.

Challenge: Build a Product Landing Page

Link to the challenge:
https://codepen.io/itcouldbeworse/pen/yLNojoP

2

Hi,
To discover the reason you have to open the console and check the element. Go to the nav-bar container and try to find the issue. (Check the style)
I hope it is help.

3

Don’t use float, use flexbox. If you search for videos or articles on making a navbar you will get plenty of help. You have to fix the CSS of the ul, what you have now is not going to work. Also, check for errors and spelling in the CSS.

A quick example of some changes to your CSS

Summary 
#header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#header-img { 
  width: 150px;
  height: 85px;
}

.nav-bar {
  margin-left: auto;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  padding: 20px;
}

li a:hover {
  background-color: grey;
  color: orange;
}

li a.active {
  background-color: #4CAF50;
  color: pink;
}
4

thank you! I haven’t really understood flexbox until now!