یکی از اشتباهاتت اینه که بجای اینکه از نام کلاس clearfix استفاده کنی از مقدار css اون ( و البته بصورت ناقص) داخل کلاس استفاده کردی ( clear:both ) که نه تنها جواب نمیده بلکه کلا قالب رو می ترکونه.
در انتهای تمام عناصر والدی که در فرزندانشون از کلاس های col استفاده کردی حتما کلاس clearfix بذار. قبل از شروع به کدنویسی، حتما مستندات بوت استراپ رو بخونید.
دومین موردی که دیدم اینه که بجای کلاس col-xs-8 یا col-xs-4 باید از col-xs-12 استفاده کنی. چون قراره در سایز موبایل یا xs تمام عرض صفحه ( تمام 12 ستون بوت استراپ) پر بشه نه 4 یا 8 ستون.
سومین اشتباهت اینه که وقتی تو سایزهای md و sm از تعداد ستون یکسان استفاده می کنی نیازی نیست که هر دورو به صورت col-sm-4 col-md-4 بنویسی. بلکه سایز md از سایز sm ارث می بره و فقط بنویس col-sm-4 و به این صورت برای سایز های md و lg هم اعمل میشه.
اشتباه چهارم هم اینه که وقتی همه اینها رو درست می کنی می بینی که عنصری که sp-header# داره روی نیمی از عنصر sp-top-bar# رو گرفته و نمی ذاره اون قسمت معلوم باشه. این یه مورد رو با پاک کردن position: relative عنصر sp-header# تا حدی درست میشه ولی نیاز به کار بیشتری داره
بزرگترین و پنجمین اشتباهت اینه که داری از پیج بیلدر برای طراحی قالب استفاده می کنی که به دلایل فنی کاملا مخالف استفاده از این افزونه در هر سایتی هستم. اصلا به نظرم نباید اختراع میشد. خیلی از سایت هایی که تو همین انجمن به مشکل خوردن به خاطر وجود همین افزونه مزرخرف هست. گرچه همچنان استفاده از این افزونه مزخرف ادامه داره.