表格的奇怪对齐问题

Question

I have a contact form at the bottom of my web page.

Whenever I click on any of the fields of the forms, the alignment goes all crazy. It doesn't happen on my phone, it doesn't happen when I run the site locally (ie on my PC directly from the source code on my hard drive. Offline).

Link to my web page: thisisit.coolpage.biz

CSS used for center alignment(found on an online tutorial):

form {
    margin:0 auto;
    width:459px;
    font-family: 'Bree Serif', serif;
}

textarea {
    width:439px;
    height:27px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    color:#3a3a3a;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

PS- Ignore the content on the page please :P

Answer 1

Multiple id with the same name on one HTML page can cause problems.

Change your rule in your css to a class:

change:

#p1{
text-align: center;
font-family: 'Bree Serif', serif;
}

to:

.p1{
text-align: center;
font-family: 'Bree Serif', serif;
}

then on your PAGE change <p id="p1"> to <p class="p1"> . I would try to stay away from multiple IDs on elements like <h1> and <p> . Otherwise your centering looks okay to me.