Div goes to the next line in CSS

Question

Div with class name main goes to the next line. I don't need it. It's wrong. I've vertical navbar with display block. I don't know why it goes to the next line.

Here's HTML code:

/* Nav */

nav {
  padding-left: 30px;
  padding-top: 30px;
  height: 100vw;
  width: 290px;
  border-right: 1px solid #333333;
}

.nav__link {
  color: #FFFFFF;
  width: 250px;
  display: block;
  border-radius: 8px;
  padding: 6px 0px 6px 30px;
  transition: background-color .2s linear;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-top: 20px;
}

.nav__link:hover {
  background-color: #707070;
}


/* Main */

.main {
  margin-left: 300px;
}

<!-- Nav -->
<nav>
  <a href="" class="nav__link">Project 1</a>
  <a href="" class="nav__link">Project 2</a>
  <a href="" class="nav__link">Project 3</a>
  <a href="" class="nav__link">Project 4</a>
</nav>

<!-- Main -->
<div class="main">
  <div class="project">
    <h1 class="project__name">Project 1</h1>
    <p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
  </div>
</div>

Any ideas to solve this problem, guys?

T J · Accepted Answer · 2021-05-02T16:09:30.957

Add display: flex; to their parent, which is currently <body>:

body {
  display: flex;
}

block elements take up entire width, so nav will push the <div> to next line by default.

Side note: I recommend using more semantic elements like <aside> and <main>

/* Nav */

body {
  display: flex;
}

nav {
  padding-left: 30px;
  padding-top: 30px;
  height: 100vw;
  width: 290px;
  border-right: 1px solid #333333;
  background: grey;
}

.nav__link {
  color: #FFFFFF;
  width: 250px;
  display: block;
  border-radius: 8px;
  padding: 6px 0px 6px 30px;
  transition: background-color .2s linear;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-top: 20px;
}

.nav__link:hover {
  background-color: #707070;
}


/* Main */

main {
  margin-left: 300px;
}

<aside>
  <nav>
    <a href="" class="nav__link">Project 1</a>
    <a href="" class="nav__link">Project 2</a>
    <a href="" class="nav__link">Project 3</a>
    <a href="" class="nav__link">Project 4</a>
  </nav>
</aside>

<!-- Main -->
<main>
  <div class="project">
    <h1 class="project__name">Project 1</h1>
    <p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
  </div>
</main>

Div goes to the next line in CSS

1 Answers1