Hasil berbeda saat memanggil dari path dan localhost

permisi saya mau tanya

saya membuat kode html dan css seperti ini:

LOGIN

Masuk

Tidak memiliki akun? Daftar

.form_login { margin: 5px 480px; padding: 30px;

}

h2{ padding: 30px 35px; margin: -10px -50px; text-align:center; border-bottom: 2px solid #ccc;

}

#atas{ padding: 30px 35px; margin: -10px -50px; text-align:center; }

input[type=text]{ width: 93%; height: 30px; padding: 10px; margin-bottom: 0px; margin-top: 5px; border: 1px solid #ccc; color: black; font-size: 16px; }

input[type=password]{ width: 93%; height: 30px; padding: 10px; margin-bottom: 25px; margin-top: 0px; border: 1px solid #ccc; color: black; font-size: 16px; }

input[type=submit]{ font-size: 18px; background: #1b575a; color: white; cursor: pointer; font-weight: bold; width: 100%; padding: 10px 0; outline: none; border: none;

}

input:hover[type=submit]{ font-size: 18px; background: rgb(2, 17, 43); color: white; cursor: pointer; font-weight: bold; width: 100%; padding: 10px 0; outline: none; border: none;

}

#bawah{ padding: 30px 35px; margin: -10px -50px; margin-top: 30px; text-align:center; border-top: 2px solid #ccc; }

#bawah > a{ text-decoration: none; color: #1b575a; }

mengapa jika dipanggil melalui path hasilnya seperti ini:

dan jika di panggil melalui localhost hasilnya berbeda menjadi seperti ini:

Mengapa hasil tampilannya berbeda padahal source kode nya sama?

saya menggunakan server xampp ver.1.8.3 dan Chrome Version 53.0.2785.143 m

Terima Kasih.