I just started with CSS and HTML. I am not able to sync my div and nav tag along the same line. The problem is that my div and nav are too far away from each other. What's the error here?

/* CSS RESET */

* {
  margin: 0;
  padding: 0;
}

#navbar {
  align-items: center;
  display: flex;
}


/* Logo And Image */

#logo {
  margin: 10px 20px;
}

#logo img {
  margin: 0px 0px;
}


/* Navigation Bar:-List Styling */

#navbar ul {
  display: flex;
}

<nav id="navbar">
  <div id="logo">
    <img src="top.png" alt="Image Failed To Load !" width="10%" />
  </div>
  <ul>
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Recommendations</a></li>
    <li class="item"><a href="#">Contact Me</a></li>
  </ul>
</nav>
<section class="home">
  <h1 class="h-primary">
    Lorem ipsum
  </h1>
</section>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Remove or change this margin:

#logo {
  margin: 10px 20px;
}

The 10px adds space to the top and bottom.

The 20px adds space to the left and right.

CodePudding user response：

I checked and tested your code, and from what you asked i understand you want div and ul to be same line, which are located inside nav. Then you should use display:flex; for element.

Don't forget to link your css to your HTML.

<link rel="stylesheet" href="test.css">

It seems perfectly fine in my testing, div and ul at the same line