Why is my input box not centered? | Scrimba | Page 1

The issue is that while you have text-align: center on your .main container, the input box isn't being centered because:

You've set display: block on the .newsletter input, which makes it a block-level element
Block-level elements take up the full width available by default, but you've constrained it to width: 150px
The text-align: center property only affects inline/inline-block elements, not block-level element positioning

Here are two simple solutions:

Option 1: Add margin auto to the input (recommended for block elements)

.newsletter {
    display: block;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    /* ... rest of your styles ... */
}

Option 2: Change it to inline-block and let text-align work

.newsletter {
    display: inline-block;
    width: 150px;
    /* ... rest of your styles ... */
}

Either solution will center your input box properly. The first option is generally preferred for form elements as it maintains block-level behavior while allowing centering through auto margins.

#Why is my input box not centered?