السبب يعود لان ال width ياخذ معاملين:
1- padding
2- border
ولاحظ في خصائص الفورم التي كتبناها سابقا حددنا ان الـ padding من اليمين واليسار = 20 ولديك ايضا الـ border الذي اخذ 1px

لنجرب تصفير الحواف padding

بمقدار 1 بكسل زادت وهي للborder
فما الحل؟؟

هناك حل بدائي وحل متقدم:
الحل البدائي في هذه المرحلة هي ان تجعل العرض اقل من 100%
الحل المتقدم كتابة الخاصية box-sizing: border-box; نشرحها بالتفصيل في وقتها

ايضاً لتعديل تصميم حقول الادخال تحتاج إلى:
1- زيادة المسافات بينهما (margin) و (padding)
2- استدارة حواف الحدود (border-radius)
3- جعل خلفية حقول الادخال شفافة
4- تعديل لون الـ placeholder
5- تعديل لون النص المدخل لاحقاً من قبل المستخدم

لاحظ ان الـ color داخل حقل الادخال تخص النص الذي سيدخله المستخدم
بقي تغير لون الـ placeholder

الـ placeholder سمة موجودة داخل العنصر input وللدخول اليها وعمل تغيرات تحتاج إلى كتابة الرمز ::
input::placeholder{
color:#fff;
}

سيأتي شرح كل عنصر في حينه
ركز فقط الآن على placeholder

بهذا الشكل
ولاحظ استخدامنا للخاصية الثانية للشفافية opacity

ممكن ايضا ان تكون بالشكل الثالث rgba

لنقم بتغير حدود حقول الادخال
border: 1px solid #ffffff94;

الخطوة القادمة توسيط زر الارسال button
وتقريبا ستكون التعديلات مشابه لحقول الادخال السابقة

على الرغم من كون العرض 100% الا انها لم تخرج عن النطاق وهنا السبب

cursor: pointer;

بالنسبة لخواص التلاعب بالنصوص (fonts)
فأهمها:
1- font-size
2- font-weight
3-font-family