Tell us what’s happening:
It seems that the text-label overlaps the form box and I can’t seem to get it perfectly centered within the form box.
Your code so far
HTML:
<!DOCTYPE html>
<html>
<head>
<title>OS survey</title>
<link rel="stylesheet" href="surveystyle.css">
</head>
<div id="script">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</div>
<div class="title-section">
<h1 id="title">macOS vs. Windows</h1>
<p id="description">Thank you for helping us decide which platform to focus on</p>
</div>
<div id="surveyform">
<form id="form">
<label>Name</label>
<input type="text" placeholder="Enter your name here">
</form>
</div>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
html{
font-family: 'Roboto', sans-serif;
}
.title-section {
text-align: center;
}
#title{
margin-top: 2em;
}
#description{
margin-bottom: 2em;
}
@media (min-width: 749px) {
form{
max-width: 750px;
}
}
form{
background-color: turquoise;
border-radius: 5px;
}
input{
width: 100%;
}
Your browser information:
Microsoft Edge version 87.0.664.47
Challenge: Build a Survey Form
Link to the challenge:
