How to put paragraph center right below navbar - html

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 rowand col div
<div class="container">
<div class="navbar">
<img src="images/logo.png" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Login</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

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>Home</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col">
<h1>Sparison</h1>
<P>Music Matching With Love ❤️ </P>
</div>
</div>

Answer 2

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>Home</li>
<li>Login</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 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>Home</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col">
<h1>Sparison</h1>
<P>Music Matching With Love ❤️ </P>
</div>
</div>