Question 43683 in Html Question posted in
Some basic documentation can be found here.

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

Image here

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.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search