[CSS] Help with CSS Element

[IntactDev]

I used CSS to create a replica of the <hr> tag, using "<div class='line'>". Whenever I use <h2> or the line class outside of the <form> tag, it works how it should. But, as soon as I put one inside the form tag, they're no longer aligned.

Here's the html:

<div class='form'>
                <h2><span>Add a New Date</span></h2>
                  <div class='line'></div>
 
                  <!-- Span class ie-placeholder is there for IE browser. IE doesn't support placeholder attribute -->
                  <h1>Event Information</h1>
                  <form class='input-form' method='POST' autocomplete='off'>
                    <span class='ie-placeholders'>Event Name</span><input name='event_name' type='text' placeholder='Event Name' />
                    <span class='ie-placeholders'>Event Date</span><input name='event_date' type='text' placeholder='Event Date' />
                    <span class='ie-placeholders'>Event Time</span><input name='event_time' type='text' placeholder='Event Time' />
 
                    <div class='line' class='margin-left: -40px;'></div>
                    <h1>Client Information</h1>
 
                    <span class='ie-placeholders'>Client Name</span><input name='client_name' type='text' placeholder='Client Name' />
                    <span class='ie-placeholders'>Client E-Mail</span><input name='client_email' type='text' placeholder='Client E-Mail' />
                    <span class='ie-placeholders'>Client Address</span><input name='client_address' type='text' placeholder='Client Address' />
                    <span class='ie-placeholders'>Client Telephone</span><input name='client_telephone' type='text' placeholder='Client Telephone' />
 
                    <div class='line' class='margin-left: -40px;'></div>
                    <h1>Event Payment</h1>
 
                    <span class='ie-placeholders'>Amount Paid</span><input name='amount_paid' type='text' placeholder='Amount Paid' />
                    <span class='ie-placeholders'>Amount Total</span><input name='amount_total' type='text' placeholder='Amount Total' />
                    <span class='ie-placeholders'>Payment Date</span><input name='payment_date' type='text' placeholder='Payment Date' />
 
                    <input name='login' type='submit' class='btn-calendar' value='Sign in' />
                  </form>
            </div>

Here's the css:

.line {
    margin:  5px 0 0 30px;
    width:  365px;
    height:  1px;
    background-color:  #d7d7d7;
}
h1 {
    font-size: 20px;
    padding-top: 10px;
    padding-left: 30px;
    color:  #555;
}

The highlighted areas are where the elements are no longer aligned.

 

[wite]

Replace your h1 CSS with this:

h1 {
    font-size: 20px;
    padding-top: 10px;
    padding-left: 0px;
    color:  #555;
}
 
You're <h1> were getting a padding left of 30px, pushing them over to the side.
If you need a certain <h1> to have a padding-left: 30px;, than wrap that certain <h1>
in some <div></div> tags and style it separately.

 

[Markshall]

Remove the 30px margin-left from your .line

 

[IntactDev]

You must be registered for see links

&

You must be registered for see links

Thanks a lot! I didn't know it would mess up if in another element.. but thanks! Close thread please :3

 

[Markshall]

Thread closed on request.