از این ساختار چیزیو نمیشه متوجه شد که بشه اصلاحش کرد.

یک سری نکات واستون میارم که مرتبط با مشکلتون هست و باید اصولی موضوع رو حل کنید:

• اسامی کلاس هاتون رو واضح انتخاب کنید تا مشخص باشه برای چه والد و فرزندیه
• ساختار مناسبی برای html انتخاب کنید، باید با html باکس بندی کنید و اگر تقسیم بندی درستی انجام دهید دیگر نیاز به margin‌های به این شکل نبوده و فقط والد‌ها را جابجا میکردید تمامیه فرزندها هم جابجا میشدند.
• اگر والد و فرزندی بدرستی انجام شود(در تگ‌های html) دیگر نیاز نیست به هر جزء جداگانه margin یا font یا ... تکرار کرد، بلکه از والد به ارث خواهند برد.
• این مدل کدنویسی جدای ازینکه اصولی نیست و شما رو از خروجی نهایی دور میکنه، عیب یابی و اصلاح کار رو سخت میکنه و همچنین خطوط کدو بسیار زیاد میکنه و فرضاً صفحه ای که باید با 100 خط کد نوشته شود، 500 خط کد غیر اصولی نوشته میشود.
• پس مهمترین قسمت ماجرا، اسکلت بندی html است که اگر درست انجام شود، مراحل بعدی راحتتر انجام خواهد شد.
• داخل codepen.io در قسمت html فقط تگ‌های زیر مجموعه body قرار میگیرند و head و مجموعه head مثل تگ link نمیاد. تگ‌های زیر مجموعه head از طریق آیکون چرخ دنده قرار میگیرند.
• این نمونه رو ببینید و ایده بگیرید. (لینک)