Having trouble connecting my <section> and the <p> beneath it. Below is the HTML and CSS code in question:
#projects {
background: linear-gradient(#5db7de, #4e9bbb);
flex-direction: column;
align-items: center;
display: flex;
}
img {
width: 500px;
height: 500px;
object-fit: cover;
border-radius: 10px;
}
.project-tile {
font-size: 40px;
font-weight: bold;
background-color: #113f53;
width: 500px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#project-1 {
padding-top: 30px;
}<div id="projects">
<h3 id="intro-projects">These are my Responsive Web Projects</h3>
<br />
<section class="project-img" id="project-1">
<a href="https://survey-form.freecodecamp.rocks" target="_blank">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg" />
</a>
</section>
<p class="project-tile">SURVEY FORM</p>
<div id="space_bottom"></div>
</div>My objective:
The separation between my image text and pictures needs to be fixed to match the layout shown in the "Objective" section.