I am facing an issue with some whitespace between the image and the content below it. I attempted to use body{background-color:black;}, however, this overrides my color gradient in the lower part of the page. I have not experimented with using something like nowrap as I am unsure of how to implement it correctly.
Below you will find my HTML code:
<!DOCTYPE html>
{% extends "base.html" %}
{% block body %}
{% load static %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'TSAWeb_App/contact.css' %}">
</head>
<body>
<div class = "ContactUs">
<img src = "https://i.pinimg.com/originals/38/e9/9f/38e99f0083d07f6ac1df75b6bbb0fbf2.jpg" width = "100%">
<div class = "w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"
style = "white-space:nowrap">
<h1 style = "text-align:center"><b>Our Socials</b></h1>
</div>
</div>
<div class = "MainBody">
<p style = "text-align: center">
<b>Find us at...</b>
</p>
<br>
<div class = "Contacts">
<figure class = "Insta">
<a href = "https://www.instagram.com/dulles.tsa/">
<img src = "https://www.freepnglogos.com/uploads/instagram-logos-png-images-free-download-2.png"
width = "50%" height = "50%">
<figcaption>Instagram</figcaption>
</a>
</figure>
<figure class = "Gmail">
<a href = "mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8a9b82882b9dc099c68898839bc88989ad86aaaeac">[email protected]</a>">
<img src = "https://upload.wikimedia.org/wikipedia/commons/4/45/New_Logo_Gmail.svg"
width = "50%" height = "50%">
<figcaption>Gmail</figcaption>
</a>
</figure>
<figure class = "Discord">
<a href = "https://discord.gg/uYFVqsy">
<img src = "https://www.rust-evolution.net/wp-content/uploads/2018/12/discord-icon-template-9.png"
width = "50%" height = "50%">
<figcaption>Discord</figcaption>
</a>
</figure>
<figure class = "Twitter">
<a href = "localhost:8000/contact">
<img src = "http://assets.stickpng.com/images/580b57fcd9996e24bc43c53e.png"
width = "50%" height = "50%">
<figcaption>Twitter</figcaption>
</a>
</figure>
<figure class = "Remind">
<a href = "localhost:8000/contact">
<img src = "https://www.pngkit.com/png/full/97-972295_remind-logo-blue.png"
width = "50%" height = "50%">
<figcaption>Remind</figcaption>
</a>
</figure>
</div>
</div>
</body>
{% endblock %}
Additionally, here is my current CSS:
h1{
padding-bottom:125px;
}
p{
font-size:20px;
}
.Contacts {
display: flex;
align-items: center;
}
.Contacts figure {
flex: 1;
text-align: center;
}
.MainBody{
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5));
color:white;
}
a{
color:white;
}