Fixed nav not working (landing page project)

HTML-CSS
1

This is how my nav should look but fixed

image
image1842×610 185 KB

instead when I add fixed it turns into this…

image
image1920×593 192 KB

My codepen > https://codepen.io/rubyNY/pen/GLyrbR
This is my code:

<body class="container">
<header id="header">
  <img id="header-img" src="https://png2.kisspng.com/sh/4e9515f7e68f163bbee410c2e5957878/L0KzQYm3VMIxN517j5H0aYP2gLBuTfNwbpdqfZ91b3fyPbTokQB2a5RuhtG2Y3zsgH7okwQub5CyjtdsdHB1PYbohMliaWdpT9VvNkS7PoOAUcMzQGU5Sac7NEK0RISBUcUyOWoziNDw/kisspng-coffee-logo-cappuccino-clip-art-go-vector-5ad9aa6d7cf648.2713284415242143815119.png" alt="coffee cup logo">
  <nav id="nav-bar">
    <a class="nav-link" href="#about">ABOUT US</a>
    <a class="nav-link" href="#gallery">GALLERY</a>
    <a class="nav-link" href="#contact">CONTACT</a>
  </nav>    
</header>     

<section class="main">
  <div>
    <img src="http://pluspng.com/img-png/waffle-breakfast-png-it-s-waffles-day-we-inspire-life-754.png">
  </div>
  <div class="form">
    <h1>Fresh Breakfast Served Daily</h1>
    <span>subscribe for weekly coupons</span>
    <form id="form" action="/">
      <input type="email" name="email" id="email" placeholder="enter your email" />
      <input id="submit" type="submit" value="Get Coupons" class="btn"></input>
    </form>
  </div>
</section>  

<section id="about">
  <div>
  <h1>TEST TEST TEST</h1>
  </div>  
</section>

<section id="gallery">
  <div>
  <h1>TEST TEST TEST</h1>
  </div>  
</section>

<section id="contact">
  <div>
  <h1>TEST TEST TEST</h1>
  </div>  
</section>

</body>

  




<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: white;
  color: black;
  font-family: sans-serif;
}

#header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header-img {
  width: 100px;
  height: 110px;
}

#nav-bar a {
  margin: 0;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}

#nav-bar a:hover {
  color: #ff9c11;
}

.container {
  max-width: 1400px;
  margin: 0 auto !important;
  padding: 0 40px !important;
}

h1 {
  font-weight: 500;
  font-size: 3rem;
  margin-bottom: .5rem;
  margin-top: 4rem;
}

span {
  font-weight: 500;
  font-size: 1.4rem;
  margin-bottom: 2rem;
}

input {
  padding: .75rem 1.5rem;
  border-radius: .5rem;
}

.btn {
  color: white;
  background-color: #ff9c11;
  padding: .75rem 1.5rem;
  border-radius: .5rem;
  font-size: .9rem; 
}

.form {
  float: right; !important
}

.main img {
  width: 25rem; !important
  height: 25rem; !important
  float: left; !important
  margin-left: 10rem; !important
}

/* GLOBAL */
section {
 margin: auto;
 overflow: hidden;
 display: flex;
 justify-content: center; 
}






/* responsive */
@media (max-width: 1362px) {
  .main img {
    display: none;
  }
  
  .form {
    text-align: center;
    float: none;
  }
}
3

Thanks for the response.

If I use top, left, right : 0 my nav breaks the width and sent to opposite sides of the screen. If I alter them by giving left and right a value than when I resize the screen smaller it breaks as well.

image
image2529×758 199 KB

5

I am not sure where to add the new class you’re mentioning.

7

ok i see what you’re saying, but while that brings it close to the width I had before its still not exactly right.

image
image2564×938 264 KB

should I just change: right: 200px; left: 200px;

8

also, if I wanted now to get the nav background color to be 100% the width of the screen what could I do?

image
image2564×938 263 KB

9
  1. Don’t use a fixed size on the position properties.
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #dbdbdb;
}

  1. You have the semi-colon before !important (line 73 to 80) it should be after. You also don’t need any of the !important you are using. In fact, you will rarely need to use !important if your CSS is well written. It should mainly be used with utility classes and styles you know need to always overwrite other styles.

  2. You have an empty main element, not sure why?

10

  1. Thanks that worked.

  2. Yep your write I forgot I wrote those and went on to different issues, removed them…

  3. Was doing the suggestion of Randell