Почему у всех блоков появился лишний отступ, хотя у body уже указана точная ширина?

28 февраля 2021, 15:40

body { 
  width: 1360px; 
  margin: 0px; 
  padding: 0; 
} 
 
header { 
  min-height: 100%; 
  height: 240px; 
  background-color: #e9e9e9; 
} 
 
.logo { 
  margin-top: 38px; 
  margin-left: 100px; 
} 
 
.menu { 
  margin-top: -30px; 
} 
 
.menu a { 
  text-decoration: none; 
  display: inline-block; 
  color: #1d1d1d; 
} 
 
.text { 
  font-family: 'Montserrat', sans-serif; 
  margin-right: 50px; 
  font-size: 12px; 
  letter-spacing: 1px; 
  word-spacing: 20px; 
  font-weight: bolder; 
  margin-right: 30px; 
} 
 
.indent { 
  font-family: 'Montserrat', sans-serif; 
  margin-right: 50px; 
  font-size: 12px; 
  letter-spacing: 1px; 
  word-spacing: 20px; 
  font-weight: bolder; 
  margin-right: 40px; 
  text-indent: 610px; 
  margin-top: -30px; 
  text-align: right; 
} 
 
.menu a:hover { 
  text-decoration: none; 
  color: lightskyblue; 
} 
 
.banner { 
  background-color: #e9e9e9; 
  height: 420px; 
  margin: none; 
} 
 
.web1 { 
  text-align: right; 
  font-family: 'Montserrat', sans-serif; 
  color: #1d1d1d; 
  font-weight: 700; 
  font-size: 40px; 
  word-spacing: 5px; 
  letter-spacing: 0.5px; 
  margin-right: 130px; 
  margin-top: none; 
} 
 
h2 { 
  margin: 0; 
  padding: 0; 
} 
 
.web2 { 
  text-align: right; 
  font-family: 'Nunito Sans', sans-serif; 
  color: #818181; 
  font-weight: lighter; 
  font-size: 18px; 
  word-spacing: 5px; 
  letter-spacing: 0.5px; 
  margin-right: 235px; 
  margin-top: 40px; 
} 
 
.web3 { 
  text-align: right; 
  font-family: 'Nunito Sans', sans-serif; 
  color: #818181; 
  font-weight: lighter; 
  font-size: 18px; 
  word-spacing: 5px; 
  letter-spacing: 0.5px; 
  margin-right: 225px; 
  margin-top: -15px; 
} 
 
.web4 { 
  text-align: right; 
  font-family: 'Nunito Sans', sans-serif; 
  color: #818181; 
  font-weight: lighter; 
  font-size: 18px; 
  word-spacing: 5px; 
  letter-spacing: 0.5px; 
  margin-right: 379px; 
  margin-top: -15px; 
} 
 
.button { 
  width: 180px; 
  height: 50px; 
  border-color: #10c9c3; 
  background: #10c9c3; 
  cursor: pointer; 
  border-style: solid; 
  font-size: 12px; 
  font-family: 'Montserrat', sans-serif; 
  color: #ffffff; 
} 
 
.contact { 
  margin-top: 45px; 
  text-align: right; 
  margin-right: 590px; 
} 
 
.about { 
  background-color: #ffffff; 
  max-height: 300px; 
} 
 
.inf { 
  color: #1d1d1d; 
  text-align: center; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: 600; 
  font-size: 30px; 
  word-spacing: 5px; 
  letter-spacing: 0.5px; 
  margin-top: 100px; 
} 
 
.inftext1 { 
  text-align: center; 
  color: #818181; 
  font-family: 'Nunito Sans', sans-serif; 
  font-weight: lighter; 
  font-size: 16px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-top: 30px; 
} 
 
.inftext2 { 
  text-align: center; 
  color: #818181; 
  font-family: 'Nunito Sans', sans-serif; 
  font-weight: lighter; 
  font-size: 16px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-top: -15px; 
} 
 
.inftext3 { 
  text-align: center; 
  color: #818181; 
  font-family: 'Nunito Sans', sans-serif; 
  font-weight: lighter; 
  font-size: 16px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-top: -15px; 
} 
 
.signature { 
  margin-top: 20px; 
} 
 
.skills { 
  height: 520px; 
  background-color: #e9e9e9; 
} 
 
.smth { 
  height: 520px; 
  width: 680px; 
  background-color: #f8f9f9; 
} 
 
.titelpr { 
  text-align: center; 
  color: #1d1d1d; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: 600; 
  font-size: 30px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 250px; 
  padding-top: 150px; 
} 
 
.design { 
  text-align: center; 
  color: #1d1d1d; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: 800; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 435px; 
  margin-top: 30px; 
} 
 
.procent { 
  text-align: center; 
  color: #1d1d1d; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bolder; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 280px; 
  margin-top: -26px; 
} 
 
.rectangle2 { 
  margin-top: -5px; 
  margin-left: 77px; 
} 
 
.rectangle1 { 
  margin-top: -18px; 
  margin-left: 77px; 
} 
 
.development { 
  text-align: center; 
  color: #1d1d1d; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bolder; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 390px; 
  margin-top: 33px; 
} 
 
.procent1 { 
  text-align: center; 
  color: #1d1d1d; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bolder; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 192px; 
  margin-top: -27px; 
} 
 
.rectangle4 { 
  margin-top: -5px; 
  margin-left: 77px; 
} 
 
.rectangle3 { 
  margin-top: -18px; 
  margin-left: 77px; 
} 
 
.marketing { 
  text-align: center; 
  color: #1d1d1d; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bolder; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 450px; 
  margin-top: 30px; 
} 
 
.procent2 { 
  text-align: center; 
  color: #1d1d1d; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bolder; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 300px; 
  margin-top: -27px; 
} 
 
.rectangle7 { 
  margin-top: -5px; 
  margin-left: 77px; 
} 
 
.rectangle5 { 
  margin-top: -18px; 
  margin-left: 77px; 
} 
 
.numbers { 
  height: 240px; 
  background-color: #10c9c3; 
} 
 
.num1 { 
  margin-top: 110px; 
  margin-left: 100px; 
} 
 
.num12 { 
  text-align: center; 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bold; 
  font-size: 18px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 967px; 
  margin-top: -70px; 
} 
 
.num11 { 
  text-align: center; 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bold; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 850px; 
  margin-top: -12px; 
} 
 
.num2 { 
  margin-top: -75px; 
  margin-left: 375px; 
} 
 
.num21 { 
  text-align: center; 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bold; 
  font-size: 18px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 410px; 
  margin-top: -70px; 
} 
 
.num22 { 
  text-align: center; 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bold; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: 335px; 
  margin-top: -14px; 
} 
 
.num3 { 
  margin-top: -75px; 
  margin-left: 635px; 
} 
 
.num31 { 
  text-align: center; 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bold; 
  font-size: 18px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: -110px; 
  margin-top: -70px; 
} 
 
.num32 { 
  text-align: center; 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bold; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: -225px; 
  margin-top: -12px; 
} 
 
.num4 { 
  margin-top: -75px; 
  margin-left: 905px; 
} 
 
.num41 { 
  text-align: center; 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bold; 
  font-size: 18px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: -630px; 
  margin-top: -70px; 
} 
 
.num42 { 
  text-align: center; 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: bold; 
  font-size: 12px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  margin-right: -705px; 
  margin-top: -14px; 
} 
 
.work { 
  height: 930px; 
  background-color: #fff; 
  margin: 0; 
  padding: 0; 
} 
 
.work1 { 
  color: #1d1d1d; 
  font-family: 'Montserrat', sans-serif; 
  font-weight: 600; 
  font-size: 30px; 
  word-spacing: 2px; 
  letter-spacing: 0.5px; 
  text-align: center; 
  margin-top: 110px; 
} 
 
.work2 { 
  color: #818181; 
  font-family: 'Nunito Sans', sans-serif; 
  font-weight: lighter; 
  font-size: 16px; 
  word-spacing: 1px; 
  letter-spacing: 0.5px; 
  text-align: center; 
  margin-top: 27px; 
} 
 
.work3 { 
  color: #818181; 
  font-family: 'Nunito Sans', sans-serif; 
  font-weight: lighter; 
  font-size: 16px; 
  word-spacing: 1px; 
  letter-spacing: 0.5px; 
  text-align: center; 
  margin-top: -15px; 
} 
 
.video { 
  height: 600px; 
  width: 1170px; 
  background-color: #e9e9e9; 
  margin-left: 100px; 
  margin-top: 50px; 
}

<header> 
  <img src="logo.png" alt="" class="logo"> 
  <div class="menu"> 
    <a href="#" onMouseOut='getElementyById' (menu1).style.display="none" ; onMouseover="getElementyById" (menu1).style.display="block" ;> 
      <p class="text indent">HOME</p> 
    </a> 
    <a href="#" onMouseOut="getElementyById" (menu2).style.display='none' ; onmouseover="getElementyById" (menu2).style.display="block" ;> 
      <p class="text">ABOUT</p> 
    </a> 
    <a href="#" onMouseOut="getElementyById" (menu3).style.display='none' ; onmouseover="getElementyById" (menu2).style.display="block" ;> 
      <p class="text">WORK</p> 
    </a> 
    <a href="#" onMouseOut="getElementyById" (menu4).style.display='none' ; onmouseover="getElementyById" (menu2).style.display="block" ;> 
      <p class="text">PROCESS</p> 
    </a> 
    <a href="#" onMouseOut="getElementyById" (menu5).style.display='none' ; onmouseover="getElementyById" (menu2).style.display="block" ;> 
      <p class="text">SERVICES</p> 
    </a> 
    <a href="#" onMouseOut="getElementyById" (menu6).style.display='none' ; onmouseover="getElementyById" (menu2).style.display="block" ;> 
      <p class="text">TESTIMONIALS</p> 
    </a> 
    <a href="#" onMouseOut="getElementyById" (menu7).style.display='none' ; onmouseover="getElementyById" (menu2).style.display="block" ;> 
      <p class="text">CONTACT</p> 
    </a> 
  </div> 
</header> 
<!--Banner--> 
<div class="banner"> 
  <h2 class="web1">Web Design and Development</h2> 
  <p class="web2">We are a new design studio based in USA. We have over </p> 
  <p class="web3">20 years of combined experience, and know a thing or two</p> 
  <p class="web4">about designing websites and mobile apps. </p> 
  <div class="contact"> 
    <form> 
      <input type="button" value="CONTACT US" class="button" onClick=();> 
  </div> 
  </form> 
</div> 
<!--About us--> 
<div class="about"> 
  <h3 class="inf">About us</h3> 
  <p class="inftext1">Divide have don't man wherein air fourth. Own itself make have night won't make. </p> 
  <p class="inftext2">A you under Seed appear which good give. Own give air without fowl moveth dry first </p> 
  <p class="inftext3">heaven fruit, dominion she'd won't very all. </p> 
  <center> 
    <img src="signature.png" alt="" class="signature"> 
  </center> 
</div> 
<!--Professional Skills--> 
<div class="skills"> 
  <div class="smth"> 
    <h3 class="titelpr">Professional Skills</h3> 
    <!--UI/UX Design--> 
    <p class="design">UI/UX DESIGN</p> 
    <p class="procent">75%</p> 
    <!--Rectangles for UI/UX Design--> 
    <div class="rectangle2"> 
      <img src="rectangle2.png" alt=""> 
    </div> 
    <div class="rectangle1"> 
      <img src="rectangle1.png" alt=""> 
    </div> 
    <!--Web-delepoment--> 
    <p class="development">WEB DEVELOPMENT </p> 
    <p class="procent1">90%</p> 
    <!--Rectangles for Web development--> 
    <div class="rectangle4"> 
      <img src="rectangle2.png" alt=""> 
    </div> 
    <div class="rectangle3"> 
      <img src="rectangle3.png" alt=""> 
    </div> 
    <!--marketing--> 
    <p class="marketing">MARKETING</p> 
    <p class="procent2">65%</p> 
    <!--Rectangles for marketing--> 
    <div class="rectangle7"> 
      <img src="rectangle2.png" alt=""> 
    </div> 
    <div class="rectangle5"> 
      <img src="rectangle5.png" alt=""> 
    </div> 
  </div> 
  <!--Numbers--> 
  <div class="numbers"> 
    <!--1--> 
    <img src="https://pp.userapi.com/c856024/v856024253/761a8/plT3ELefu64.jpg" alt="" class="num1"> 
    <p class="num12">548</p> 
    <p class="num11">PROJECTS COMPLETED</p> 
    <!--2--> 
    <img src="https://pp.userapi.com/c851024/v851024661/156c54/XzcwkcwDIug.jpg" alt="" class="num2"> 
    <p class="num21">1465</p> 
    <p class="num22">WORKING HOURS</p> 
    <!--3--> 
    <img src="https://pp.userapi.com/c850136/v850136606/17f137/o9kT2FMrfMo.jpg" alt="" class="num3"> 
    <p class="num31">612</p> 
    <p class="num32">POSITIVE FEEDBACKS</p> 
    <!--4--> 
    <img src="https://pp.userapi.com/c852124/v852124606/15287a/te1EI__ImnM.jpg" alt="" class="num4"> 
    <p class="num41">735</p> 
    <p class="num42">HAPPY CLIENTS</p> 
  </div> 
  <!--work--> 
  <div class="work"> 
    <h3 class="work1">Our Work Process</h3> 
    <p class="work2">Was years it seasons was there form he in in them together over that, </p> 
    <p class="work3">third sixth gathered female creeping bearing behold years.</p> 
    <!--div for video--> 
    <div class="video"> 
 
    </div> 
  </div>

Несмотря на то, что у меня стоит ширина 1360px, экран гораздо больше. Почему?

Answer 1

Всё дело в свойствах margin-right ваших следующих классов: .num31, .num32, .num41, .num42. Если их убрать, всё работает

Answer 2

в css стилях измените width:1360px на width:auto;

body {
 width: auto;
 margin: 0px;
 padding: 0;

}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

CSS блоки нестандартной формы

100

HTML

Не скачивается файл по ссылке

Помогите пожалуйста в таком вопросе

HTML

Не подтягиваются стили css

Страница не подтягивает css и выдает много ошибок

116

Проверка на выход за границы panel

Есть у меня некая программа, в которой присутствует боковая выдвигающаяся панельПоскольку движение панели реализовано с помощью взаимодействия...

100