لدي مشكلة في تنسيقات CSS عند عمل Zoom في الصفحة

يحدث ذلك بسبب الحجم القيمة الكبيرة للخاصية right في الخاصية التالية ، لذلك لمعالجة المشكلة يمكنك تقليل القيمة ولو قمت بتقليل القيمة لتصبح 900px ربما تظهر بشكل جميل يتناسب مع الحاوية .

.sale {
  font-family: sans-serif;
  background-color: #ec2f2f;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 7px 15px;
  display: inline-block;
  position: absolute;
  letter-spacing: 3px;
  top: -17px;
  right: 965px;

}

ويمكنك حل هذه المشكلة مؤقتاً بتغيير الخاصية الخاصة بالـ body :

margin: 75px auto;
// إلى 
margin: 75px 40px;

حيث ان المربع الاحمر يختفي لكون الـ position الخاص به هو من النوع absolute وله موضع محدد "الـ right و الـ top" بينما الـ margin الخاص بالـ body موضوع على auto وبالتالي سيتغير بحسب عرض الشاشة على عكس موضع المربع الامر.

ولكن الشكل الافضل هو تحويل التصميم إلى شكل أكثر توافق مع مختلف الشاشات "responsive" بإعطاء ال body الخاصية :

// القياس بشكل نسبة مئوية بدلاً من القيمة الثابتة
width: 80%;
// بدلاً من الـ
width: 1000px;

واعطاء المربع الاحمر الخاصية :

left: -40px;
// بدلاً من 
right: 965px;