Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Online Registration Form

Hi there, I am having a hard time centering my input tag inside a form element. Can you tell me what I am doing wrong?

I would like to center the input tag that follows first name and last name, but I can't. Can anyone tell me what I am doing wrong?

<!DOCTYPE html>
<html>
<head>
    <title>HTML Form</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header class="header">THE CODE REVIEW</header>
<div class="topbar">
    <br>
    <h1 class="title">Signup for our newsletter</h1>
    <p>Get the latest news on how your code is doing right in your inbox.</p>
    <br>
    <hr size="7">
    <hr size="3">
</div>
<div class="formbox">
    <br>
    <h1 class="title aligntextleft">
        Contact Information</h1>
    <form>
     <p>First name:</p>
      <input type="text" name="firstname"><br>
      <p>Last name:</p>
      <input type="text" name="lastname">
    </form>

</div>
</body>
</html>
body        {
            margin: 0 auto;
            width: 100%;
            }
p           {
            color: #797A7D; 
            }
.header     {
            background-color: #2E384C;
            color: white;
            text-align: center;
            font-size: 1.5em;
            padding: 5%;
            }
.topbar     {
            text-align: center;
            width: 85%;
            margin: auto;
            }
.title      {
            color: #2E384C;
            font-size: 150%;
            }
.aligntextleft{
            text-align: left;   
            }           
hr          {
            background-color: #2E384C;
            margin: 0.4%;
            }
.formbox    {
            width: 85%;
            margin: 0 auto;
            color: #727272;
            font-size: 120%;
            }
form p      {
            text-align: left;
            }
.formbox input{
            width: 85%;
            padding: 2%;
            margin: auto;
            }

1 Answer

Brian Jensen
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Brian Jensen
Treehouse Staff

Only block elements are effected by left and right margins. :)

.formbox input{
            display: block;
            width: 85%;
            padding: 2%;
            margin: auto;
            }

Thank you Brian! I appreciate it! I forgot about that.