Responsive web designn

1

Product Landing Page
Hiii…I’m trying to design a navbar but I’m not able to shift it to the right most corner of the header.
And the sequence of list changes when I applied the “float:right” property to my links…

2

I’ve altered your code and made it work, take a look what i’ve changed. The nav-bar needed a width, the float should have been set on this and not the li a tags. I also had to set the li items under the nav-bar to display inline. There was no change to your HTML, only the CSS.

#header-img{
  width:4.5%;
}
li{
  list-style-type:none;
}
li a{
  padding:5px;
  text-decoration:none;
  color:black;
  font-size:20px;
}
li a:hover{
  text-decoration:underline;
}

#nav-bar{
  float:right;
  width: 300px;
}

#nav-bar ul li{
  display: inline;
}
1 Like
3

Thanxx a lot…I don’t know why sometimes css becomes so confusing for me…:sweat_smile::sweat_smile: