I’m currently facing an issue with centering the elements within the <main> tag. There seems to be a mysterious gap between the <h1> and <h3> elements, and I can’t seem to pinpoint the root cause of this spacing anomaly. Any insights on why this gap is manifesting would be greatly appreciated! Thank you in advance.
The alignment was initially flawless, but after making adjustments to the navbar, things seem to have gone awry. Despite inspecting the page, I can’t detect anything peculiar that could explain the sudden gap between these items enclosed within the <main> element—there simply seems to be nothing visibly amiss.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- A range of essential meta tags included here -->
<title>{% block title %}Welcome{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-light container-fluid d-flex align-items-top justify-content-start">
<a class="navbar-brand" href="/"><img href="index.html" src="/static/ladybug.png" width="30" height="30" class="d-inline-block align-left" alt=""></a>
<a class="navbar-brand" href="/login">Login</a>
<a class="navbar-brand" href="/register">Register</a>
</nav>
{% block main %}
<main class="container-fluid d-flex align-items-center justify-content-center h-100 w-100">
<div class="row align-items-center h-100">
<h1 class="text-center col-12">Require assistance with debugging your code?</h1>
<section class="text-center col-12">
<h3 class="d-inline-flex p-2"><strong>Seek out a study buddy for speedier problem-solving</strong></h3>
<div>
<center><hr></center>
</div>
<button type="button" class="btn btn-danger">Join Us Today!</button>
</section>
</div>
</main>
{% endblock %}
<footer class="row footer">
<p class="text-center col-12 ">EDX Harvard | CS50 2019 | Final Project</p>
</footer>
</body>
</html>
Incorporated mostly bootstrap with my custom CSS:
body,
html
{
margin: 0;
width: 100%;
height: 100%;
background: url(/static/images/girl_2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar-brand
{
font-family: 'Anton', sans-serif;
font-size: 3vmin;
}
h1
{
padding: 0px;
font-family: 'Anton', sans-serif;
font-size: 6vmin;
margin: 0;
color: #295696;
text-shadow: 0.1vmin 0.1vmin #6f8bb3;
}
h3
{
font-family: 'Roboto', sans-serif;
font-size: 3vmin;
padding: 10px;
color: #fec345;
background-color: #295696;
}
hr
{
border-color: #eb3461;
border-width: 3px;
max-width: 90px;
margin: 10px;
}
I’ve attached a screenshot illustrating the perplexing gap for reference: