Hey everyone, I’m having trouble with centering my button within the flexbox container with the class "hero". Any thoughts on why this might be happening?
The button appears below the email form but is aligned to the left of it (starting at the same position).
I’m aiming to center the button similar to the example shown in this link: https://codepen.io/freeCodeCamp/full/RKRbwL. I have a CSS reset in my code as well, but I didn't include that here. Thank you!
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
background-color: #eee;
color: black;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-weight: 900;
font-size: 1em;
padding: 20px 10px;
flex-wrap: wrap;
border-bottom: 1px solid grey;
position: sticky;
}
ul {
flex-grow: 1;
max-width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
img {
display: flex;
width: 40vw;
}
ul li {
display: inline;
text-decoration: none;
display: flex;
}
.nav-links a {
text-decoration: none;
color: black;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2em;
font-weight: 700;
padding: 20px;
}
input[type="email"] {
padding: 5px 10px;
margin: 10px 0px;
border: solid 1px black;
width: 350px;
}
input[type="submit"] {}
@media (max-width: 700px) {
header {
font-size: 1em;
}
nav {
display: flex;
flex-direction: column;
}
ul {
display: flex;
flex-wrap: wrap;
}
}<html>
<body>
<header>
<nav class="Navbar">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
<ul class="nav-links">
<li><a href="#" class="link">Features</a></li>
<li><a href="#" class="link">How It Works</a></li>
<li><a href="#" class="link">Pricing</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form class="email-form">
<div class="email-form">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
</div>
<div class="button-center">
<input class="sub-button" type="submit" value="GET STARTED">
</div>
</form>
</section>
</body>
</html>