For product landing page that I am developing, I can't center my main title, email input and button altogether

1

I want all 3 elements to be in the center of the page and aligned on top of each other with space between the three elements much like this:

navbarproductlanding
navbarproductlanding1920×281 14.8 KB

But so far all three elements are mis-align. https://codepen.io/noblegas/pen/bGGjEQz

What can I do to change all that?

1 Like
2

So, because you’re using flex, it’s fitting both those elements (the h4 and the form) on a single line, and centering THAT. -Ish.

Easiest fix? Give the h4 a width of 100%.

Easy way to see what is going on, if you’re not yet comfortable using the element inspector in the console? Give the elements in question a noticeable border:

.first-container{
  border: 1px solid red;
  // other properties you have are fine...
}
.first-container h4{
  border: 1px dotted green;
  width: 100%;
  text-align: center;
}
.first-container form {
  border: 1px dotted blue;
  text-align: center;
}
2 Likes
3

Thanks! I appreciated your response

1 Like