There seems to be an issue with centering my h1 and paragraph. I've used the right classes and styles, but the divs containing them are not aligning properly in the center of the Row.
Despite using justify-content center and align-items center, it's not working as expected. Any insights on why this might be happening? Thank you!
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: pink;
}
.red-b{border: 4px solid red;}
.blue-b{border: 4px solid blue;}
.yellow-b{border: 4px solid yellow;}
.green-b{border: 4px solid green;}
.orange-b{border: 4px solid orange;}
.black-b{border: 4px solid black;}
/* HEADER */
.main-header{
background-image: url('header-photo.jpg');
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.main-header a{
color: #fff;
}
.header-banner{
height: 80vh;
}
h1{
color: white;
font-size: 100px;
text-align: center;
font-weight: 700;
}
@media only screen and (max-width: 1200px) {
h1{
color: red;
}
}
@media only screen and (max-width: 992px) {
h1{
color: yellow;
font-size: 70px;
}
}
/*MAIN*/
/*FOOTER*/<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">START BOOTSTRAP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="header-banner row justify-content-center align-items-center blue-b">
<div class="col-12 red-b">
<h1>YOUR FAVORITE SOURCE OF FREE BOOTSTRAP THEMES</h1>
</div>
<div class="col-12 yellow-b">
<p class="header-paragraph text-center">lorem ipsum blablabla Montreal Canada</p>
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>