Why is the content showing along side with navbar? Why can't it display after navbar? - Html

MohitRakh
March 21, 2023
115 views
3 votes
3 Answers

Hello I am creating a hero section but the info that I am writing is showing in the navbar. I want it to display under the navbar. I can’t find the solution. Please help. I am not good at css

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
}

.container {
  margin: 0 25%;
  margin-top: 1%;
}

.nav nav {
  float: right;
}

.nav nav .links {
  display: flex;
  list-style: none;
}

.nav nav .links .link {
  margin: 0 20px;
  font-size: 1em;
  font-weight: 500;
}

<div class="container">
  <div class="nav">
    <nav>
      <ul class="links">
        <li class="link">Home</li>
        <li class="link">Project</li>
        <li class="link">About</li>
        <li class="link">Contact</li>
      </ul>
    </nav>
  </div>
</div>
<div class="container info2">
  <h1>Hello</h1>
</div>

I want hello to display beneath the navbar. When I try to give the margin to info2(hello) it affects the navbar too. I don’t understand please help.

Answers

By changing hello tag place in the code and using flex I think you can do this.

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
}

.container {
  margin: 0 25%;
  margin-top: 1%;
  display: flex;
  flex-direction: column;
}

.nav nav {
  float: right;
}

.nav nav .links {
  display: flex;
  list-style: none;
}

.nav nav .links .link {
  margin: 0 20px;
  font-size: 1em;
  font-weight: 500;
}

<div class="container">
  <div class="nav">
    <nav>
      <ul class="links">
        <li class="link">Home</li>
        <li class="link">Project</li>
        <li class="link">About</li>
        <li class="link">Contact</li>
      </ul>
    </nav>
  </div>
   <div class="container info2">
     <h1>Hello</h1>
   </div>
</div>

It’s the float: right; that’s causing the problem. Just add clear:both; to the div with class info2. See CSS tricks for details. These days developers tend to shy away from using floats. There are much more modern ways of dealing with layouts like flex and grid.

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
}

.container {
  margin: 0 25%;
  margin-top: 1%;
}

.nav nav {
  float: right;
}

.nav nav .links {
  display: flex;
  list-style: none;
}

.nav nav .links .link {
  margin: 0 20px;
  font-size: 1em;
  font-weight: 500;
}

/* added this */
.info2 {
  clear: both;
}

<div class="container">
  <div class="nav">
    <nav>
      <ul class="links">
        <li class="link">Home</li>
        <li class="link">Project</li>
        <li class="link">About</li>
        <li class="link">Contact</li>
      </ul>
    </nav>
  </div>
</div>
<div class="container info2">
  <h1>Hello</h1>
</div>

just remove your CSS class selector .nav nav { float : right; }

And in class .nav nav .links add padding: 0; justify-content: right;

(I removed the margin in class .containr for example)

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
}

.container {
/*  margin: 0 25%; */
  margin-top: 1%;
}

.nav nav .links {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: right;
}

.nav nav .links .link {
  margin: 0 20px;
  font-size: 1em;
  font-weight: 500;
}

<div class="container">
  <div class="nav">
    <nav>
      <ul class="links">
        <li class="link">Home</li>
        <li class="link">Project</li>
        <li class="link">About</li>
        <li class="link">Contact</li>
      </ul>
    </nav>
  </div>
</div>
<div class="container info2">
  <h1>Hello</h1>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Why is the content showing along side with navbar? Why can't it display after navbar? – Html

Answers