Product Landing Page Project - Need help positioning items like a pro

HTML-CSS
1

What I Need Help With -

Hi, while working on the Product Landing Page Project I ran into difficulties moving elements where I want them to go. I feel like Ive read up a lot on how to move css elements but at some point I feel like I always get stuck and then it’s just a guessing game of how something is going to move (also to add stack overflow never has a specific answer just a series of methods that may or may not work). I really just want to understand moving elements better instead of just throwing css code at my editor hoping things will move well. For this specific project Im trying to move my nav-bar to the top right of my page with spacing on the right side which would make both the logo and nav bar evenly spaced away from the window border at the top of the page. Im not sure if I should just be adding a margin to the left of the nav-bar or if I should be doing something that locks the element to the left side incase of resizing with other devices.

Separate Question:

Separately, Im confused in certain instances why margin or other properties sometimes don’t apply an effect. Is there some hierarchy I should know about? or some best practices for approaching css headaches? I guess Ive never totally grasped why css cant be more simple to do the things you want to do. Most things are fine but in general it’s usually a mess. Maybe Im too hopeful from using programs like photoshop that seamlessly allow me to move items without testing a bunch of different properties.

My Current Code:

HTML

<body>
  <header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
    
    <nav id="nav-bar">
      <a href="#features" class="nav-link">Features</a>
      <a href="#how-it-works" class="nav-link">How It Works</a>
      <a href="#pricing" class="nav-link">Pricing</a>
    </nav>
  </header>
  
  <main>
    <section id="features">
    </section>
    
    <section id="how-it-works">
    </section>
    
    <section id="pricing">
    </section>  
  </main>
</body>

CSS

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

body {
  font-family: 'Lato', sans-serif;
}

#header {
  position: fixed;
  top: 0px;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#header-img {
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
}

#nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 35vw;
}

.nav-link {
  text-decoration: none;
  color: black
}

My Browser Information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

Thank you for reading and any help is greatly appreciated.

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.