موقعیت مکانی اجزا

سلام خسته نباشین من ۳ تا سوال دارم در فایلی که براتون میفرستم من اگر بخواهم ul ,li ها را به پایین هدرم سمت چپ بیارم باید چیکار کنم سوال دومم اینه مه وقتی من صفحه را زوم اوت یا زوم این میکنم اجزا از جاشون خارج میشن چطور میتونم درستش کنم و سوال سومم اینه که وقتی من اندازه هارا با vw , vh میزارم اجزا به هم میریزه و خیلی هارو نمایش نمییدهد مشکلم از کجاست بنظرتون و اینکه با پوزیشن هم که امتحان میکنم کادرهام درست هستن ولی مثلا لیست هام با زوم اوت و زوم این به هم میریزن با ممارجین و پدینگ فقط بک گراندم بالا و پایین میرن و با فلوت هم که فقط سمتشونو میتونم عوض کنم ولی بالا و پایین بودن لیستم و در قسمت هدر نه ممنون میشم استباهاتمو بگین وو در اخر چندبار خواستم کد هارو براتون بفرستم نتونستم میکه پسوند فایل وارد شده اشتباه است sh.Gallery *{ margin: 0; padding:0; } .layout{ width: 700px; height: 1000px; border: 1px solid red; margin: 0 auto; box-sizing: border-box; } .header{ width:100% ; height: 20%; background: linear-gradient(to left , rgba(0,0,0,.9),rgba(0,0,0,.5)); margin: 0px; } .body{ width: 100%; height: 55%; } .sidebar{ margin: 5px; border: 1px solid red; width: calc(30% - 5px); height: calc(100% - 12px); float: right; } .countent{ width: calc(70% - 24px); height: calc(100% - 12px); border: 1px solid red; margin: 5px; float: left; } .footer { width: 100%; height: 25%; border-top: 1px solid red; } .header ul{ overflow: hidden; list-style-type: none; float: right; } .header ul li a{ text-decoration: none; color: #000; } .header ul li{ display: inline-block; border: 1px solid #fff; background-color: #fff; border-radius: 10px; }