Nav bar help too far to the right and won't move to the left and background doesn't cover all the page [Solved]

1

Hello I’m haveing some issues with my nav bar and I’m willing to start from scratch because I believe I am doing something wrong here. It shouldn’t be something complicated, but is giving me the headaches XD. Anyway. My nav bar is a simple one with a white background that scrolls down as you click the button to 3 sections of the page. Home, Works and About.

The problem that I’m having is:

  1. The background doesn’t fully complete the page. It leaves a space on the left and I have no clue why?
  2. I want my Home, Works and About (list) to be on the right (and now is covering the about part, it went to far to the right), but I can’t space it to go to the left (just a little bit). I tried putting “right: 15px;” on my nav ul css and it doesn’t work.

Can anyone help? Here is my codepen for anyone to see: https://codepen.io/JT_Cerqueira/full/YxOLxg/

.container {
  margin: 0;
  padding 0px;
  width: 100%;
}

header {
  color: #55d6aa;
}

header::after {content: '';
               display: table;
               clear: both;
}

nav {
  position: fixed;
  margin:0;
  padding:0;
  width:100%;
  background-color:white;
  z-index:99;
}

nav ul {margin: 0;
        padding: 0;
        list-style: none;
        float: right;
        right: 15px;
}

nav li {display: inline-block;
        margin-left: 70px;
        padding-top: 50px;
        position: relative;
}

nav ul li a {
  color: #66CD00;
  text-decoration: none;
  font-size: 18px;
}

nav a:hover {
  color: #78AB46;
}

nav a::before {
  content: "";
  display: block;
  height: 5px;
  background-color: #444;
  
  position: absolute;
  top: o;
  width: 0%;
  
  transition: all ease-in-out 250ms;
  
}

nav a:hover::before {
  width: 100%;
}
2

Hi, I checked your web and I the background on my screen it seems fine, I can’t see any space on the left.
With the nav bar, you can try adding this into nav css element, that should fix your problem:

position: absolute;
right: 15px;
1 Like
3

You got it almost right. The postioning of right should indeed be in the nav css. But now there is some spacing on the right of the navbar when you go to full page! Oh my God XD. But thank you very much. But it did help though. You can check that as you scroll down the page.

1 Like
4

I used bootstrap instead and now the navbar is working just fine.