How can I remove the horizontal scroll, while maintaining the adaptability of the site?

enter image description here

/*GLOBAL*/ body { font-family: 'Open Sans', sans-serif, Arial; color: #332E3C; font-size: 16px; font-weight: 300; } a.btn { font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 15px; transition: background-color .5s; } a.btn:hover { background-color: rgba(0, 0, 0, .3); } .button { background: #067655; display: block; color: white; text-decoration: none; padding: 20px; border-radius: 4px; margin-top: 10px; -webkit-transition: background-color 0.2s ease-out; float: left; } .button:hover { background: #23a95c; } div .with_triangle { background-color: #f3f3f3; width: 100%; height: 100px; position: relative; } .with_triangle::before { content: ''; width: 20px; height: 20px; background-color: inherit; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(45deg); z-index: -1 } h2 { font-size: 30px; } /*HEADER*/ header { height: 750px; background: url(../images/header_background1200-2.jpg) no-repeat center bottom; position: relative; background-size: cover; align: center; } header a.logo { z-index: 1; position: absolute; display: block; width: 200px; height: 200px; background: url(../images/Teorema_logo_v5.png) no-repeat 0 0; background-size: contain; top: 26px; left: 80px; } header a.logo span { display: none; } header h1 { color: white; font-size: 35px; } header div.hero { position: absolute; width: 42%; top: 230px; left: 5%; } header div.hero h1 { line-height: 1em; margin: 0 0 30px 0; color: #fff; } 
 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Π Π°Π±ΠΎΡ‚Π° ΠΏΡ€Π΅ΠΏΠΎΠ΄Π°Π²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ Π² ΠΎΠ½Π»Π°ΠΉΠ½-школС "Π’Π΅ΠΎΡ€Π΅ΠΌΠ°" | Π Π°Π±ΠΎΡ‚Π° для ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΎΠ²</title> <script type="text/javascript" src="js\jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/smoothscroll.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=cyrillic-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Caveat|Open+Sans:400,700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/normalize.css"> </head> <body> <header> <a class="logo" title="Teorema. Онлайн-школа ΠΏΠΎ ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅" href="#"><span>Teorema</span></a> <div class="hero"> <h1>Онлайн-школа Teorema ΠΈΡ‰Π΅Ρ‚ ΠΏΡ€Π΅ΠΏΠΎΠ΄Π°Π²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ ΠΏΠΎ скайпу.</h1> <a class="btn" title="РСгистрация прСподаватСля ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ" href="#register">РСгистрация прСподаватСля</a> </div> <a class="arrow-down" style="display:block" href="#about"> <div class="arrow-down"></div> </a> </header>

  • what is the pull? adaptability? - michael_best February
  • Yes) I mean it) - Nikita Migushev
  • It’s not at all clear where the horizontal scroll comes from. If you make the body {max-width: xxx}, then it will disappear. But there is nothing behind the scroll - Nikita Migushev pm
  • I on your place would use boostrap if the task allows. use fluid-contanier - michael_best 1:38 pm
  • And without bootstrap you can? It is necessary to wrap up the classic method) - Nikita Migushev February

0