Html elements not appearing below each other

HTML-CSS
1

I’m building my portfolio and for some reason the contents of the nav and introduction section begin on the same line. Correct me if I’m wrong, but aren’t the contents of different html tags supposed to stack on top of each other by default. This is a screenshot of what i currently get.

screenshot
screenshot1890×837 70.8 KB

Html:

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&family=Odibee+Sans&family=Roboto&family=Roboto+Mono&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'portfolio/style.css' %}" type="text/css">
  <title>Aot Portal</title>
</head>



<body>


<header>
  <nav>
    <h3> AOT </h3>
  </nav>

  <section id="introduction">
    <div class="headertext">
      <h1> Some text </h1>
      <h3> Programmer  --- Gamer  --- Athlete </h3>
    </div>
    <div class="headeravatar">
    <img src="{% static 'portfolio/avatar.png' %}" alt="avatar">
    </div>
  </section>


  <section id="illustrations">
    <div class="flexcontainer">
      <div class="pic1"> <img src="{% static 'portfolio/footballer.png' %}"> </div>
      <div class="pic2"> <img src="{% static 'portfolio/gaming.png' %}"> </div>
      <div class="pic3"> <img src="{% static 'portfolio/coding.png' %}"> </div>
    </div>
  </section>

</header>
</body>
</html>

Css:


                                          /* header */
/* nav */
nav h3{
  float:left;
  text-align: right;
}

/* headertext */

#introduction{
  text-align: center;
}

#introduction img {
  width: 20%;
}


#introduction h1{

  display: block;
  font-size: 40px;
  font-weight: 800;
}
#introduction h1, h3{
  font-family: 'Balsamiq Sans', 'Roboto','sans-serif';
}


.headertext{
  color: Black;
}


/* illustrations */
.flexcontainer{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.flexcontainer img{
  width :250px;
}
2

Your understanding is correct. By default things will stack on top of each other. The reason “AOT” and “Some Text” appear on the same line is because of the declaration above.

If you want “AOT” on the left, but to remain on it’s own line try display:flex.

3

Thank you for the reply. I used flex and it now stacks properly