CSS Div not centreing

Question

I'm new to HTML and CSS and to improve my skills i've been trying to recreate differnt sites by myself. I'm currently trying to recreate the notion home page but i have an issue. my img div is not centring? This is probably an easy fix but if someone could help i'd apprectiate it :) Here is my HTML:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

:root {
  --primary-text: #111111;
  --secondary-text: #91908f;
  --background: #fffefc;
  --btn-primary: #e16259;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--b);
  font-family: "Inter", sans-serif;
}

/* NAV */

.nav {
  width: 100;
}

.logo {
  max-width: 100%;
  height: 55px;
  margin-right: 70px;
  margin: 15px 50px;
}

a,
a:link,
a:visited {
  color: #111111;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.nav ul {
  display: flex;
  padding: 35px;
  list-style: none;
}

.nav ul li {
  padding-right: 20px;
  text-decoration: none;
  color: #91908f;
}

.nav {
  float: right;
}

/* HERO */

.nav-img {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

    <img class="logo" src="img/logo.png" alt="Notion Logo">
    <div class="nav">

        <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Careers</a></li>   
            <li><span>|</span></li>
            <li><a href="#">Sign Up</a></li>         
            <li><a href="#">Log In</a></li>         
        </ul>
    </div>

    <div class="hero">
        <div class="hero-img">
        <img src="img/hero.webp" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions">
        </div>

        <h1>All-in-one workspace</h1>
        <h4>One tool for your whole team. Write, plan, and get organized.</h4>

        <form action="">
            <input type="text" placeholder="Enter your email...">
            <button class='btn-primary' type="submit">Sign Up</button>
        </form>
        <p>For teams & individuals - web, mobile, Mac, Windows</p>
    </div>

..

Answer 1

There are different things you need to consider when learning to code, first of all, it's important to use the new html5 semantic element header where you can place your logo and nav

<header>
    <img src="logo.png" alt="Notion Logo">
    <nav>
        <a href="#">Product</a>
        <a href="#">Download</a>
        <a href="#">Resources</a>
        <a href="#">Pricing</a> |
        <a href="#">Careers</a>
        <a href="#">Sign Up</a>
        <a href="#">Log In</a>
    </nav>
</header>

*note: a nav element doesn’t have to contain a list as mentioned in MDN, and you can style them easily. The img centering issue came from the header wrong styling .nav{float: right;} .nav{ width: 100} needs to have px, %, or vw example .nav{width: 100px;}, .nav{width: 60vw;}, .nav{width: 60%;} then you can easily center the other elements vertically like below

.center-vertically {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

    <header>
        <div class="header-sub">
            <img class="logo" src="img/logo.png" alt="Notion Logo" />
            <nav>
                <a href="#">Product</a>
                <a href="#">Download</a>
                <a href="#">Resources</a>
                <a href="#">Pricing</a> |
                <a href="#">Careers</a>
                <a href="#">Sign Up</a>
                <a href="#">Log In</a>
            </nav>
        </div>
    </header>
    
<div class="center-vertically">
  <div class="centered-item">
    <img src="https://www.notion.so/cdn-cgi/image/f=auto,w=1080,q=100/front-static/pages/product/hero.png" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions" />
  </div>
  <h1>All-in-one workspace</h1>
  <h4>One tool for your whole team. Write, plan, and get organized.</h4>

  <form action="">
    <input type="text" placeholder="Enter your email..." />
    <button class="btn-primary" type="submit">Sign Up</button>
  </form>
  <p>For teams & individuals - web, mobile, Mac, Windows</p>
  <div class="centered-item">anything you want to add</div>
</div>

You can style your header, and there is an awesome resource to follow to learn properly Freecodecamp