How to put paragraph center right below navbar

Question

I have created a navbar at the top of my page and I want to center some paragraphs right below it. The paragraphs are centered but are down below the page. How do I get them back up to a view visible wihout scrolling down. Essentially, the row and col div

<div class="container">
<div class="navbar">
  <img src="images/logo.png" class="logo">
  <nav>
      <ul>
          <li><a href="{% url 'home' %}">Home</a></li>
          <li><a href="{% url 'login' %}">Login</a></li>
      </ul>
  </nav>
  </div>
</div>

<div class="row">
<div class="col">
  <h1>Sparison</h1>
  <P>Music Matching With Love ❤️ </P>
</div>
</div>

The CSS i tried is;

.col{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 0vh;
}

*{
 margin : 0;
 padding: 0;
 font-family: 'Roboto', sans-serif;
 }

.container{
width: 100%; 
height: 100vh;
background-position: center;
background-size: cover;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box ;
}

.navbar{
height: 12%;
display: flex;
align-items: center;
}

nav{
flex: 1;
text-align: right;
}


nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
}

nav ul li a{
text-decoration: none;
color:black;
font-size: 13px;
}

Answer 1

if you use bootstrap for align the praghraph to right you can add justify-content-end to the row

      <div class="container">
        <div class="navbar">
         <img src="images/logo.png" class="logo">
           <nav>
            <ul>
       <li><a href="{% url 'home' %}">Home</a></li>
        <li><a href="{% url 'login' %}">Login</a></li>
         </ul>
     </nav>
      </div>
      </div>
      <div class="row justify-content-end">
       <div class="col">
      <h1>Sparison</h1>
   <P>Music Matching With Love ❤️ </P>
       </div>
      </div>

and if tou don't use bootstrap add row this css =>

.row{
   display:flex;
justify-content:flex-end;
   width:100%;
     }

Answer 2

You have height: 100vh; on the .container , thats why the content is forced down. Use something like height: 20vh; on the container like so:

 .col{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 0vh; } *{ margin: 0; padding: 0; font-family: 'Roboto', sans-serif; }.container{ width: 100%; height: 20vh; background-position: center; background-size: cover; padding-left: 8%; padding-right: 8%; box-sizing: border-box; }.navbar{ height: 12%; display: flex; align-items: center; } nav{ flex: 1; text-align: right; } nav ul li{ list-style: none; display: inline-block; margin-left: 60px; } nav ul li a{ text-decoration: none; color:black; font-size: 13px; }

 <div class="container"> <div class="navbar"> <img src="images/logo.png" class="logo"> <nav> <ul> <li><a href="{% url 'home' %}">Home</a></li> <li><a href="{% url 'login' %}">Login</a></li> </ul> </nav> </div> </div> <div class="row"> <div class="col"> <h1>Sparison</h1> <P>Music Matching With Love ❤️ </P> </div> </div>

Answer 3

Just use text-align: center; . Unless there is another reason why you wanted to use a flexbox.

 .col { text-align: center; }

 <div class="container"> <div class="navbar"> <img src="images/logo.png" class="logo"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Login</a></li> </ul> </nav> </div> </div> <div class="row"> <div class="col"> <h1>Sparison</h1> <P>Music Matching With Love ❤️ </P> </div> </div>