After 545px in chrome, the screen does not decrease, in others it decreases, but the rules do not apply from css
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- Title --> <title>Lending</title> <!-- Favicon --> <link rel="icon" href="img/core-img/favicon.ico"> <!-- Core Stylesheet --> <link href="css/style.css" rel="stylesheet"> <!-- Responsive CSS --> <link href="css/responsive/responsive.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500,700|Montserrat:400,700' rel='stylesheet' type='text/css'> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/select2.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="css/animate.css"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- ***** Header Area Start ***** --> <div class="karkas"> <div class="header"> <!-- ***** Header Area End ***** --> <div class="section-table"> <div class="section-row"> <div class="section-cell"> <div class="section-center"> <p class="logo"> <a href="#"><img class="logo" src="images/logo.jpg" alt="Company name" /></a> <ul class="menu"> <li><a href="#">Aktuelles</a></li> <li><a href="#">Philosophie</a></li> <li><a href="#">Besonderheiten </a></li> <li><a href="#"> Partner</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> </p> </div> </div> </div> <div class="main-content-img"> <img src="images/content-img.jpg" alt="" /> </div> </div> </div> <!-- <div class="main-content">--> <!-- ****** About Us Area Start ****** --> <section class="caviar-about-us-area section-padding-150" id="about"> <div class="container"> <!-- About Us Single Area --> <div class="row align-items-center"> <div class="row"> <div class="col-md-6 wow fadeInDown"> <!-- <div class="clearfix">--> <div class="content-left"> <h1>Sehr geehrte Patienten,</h1> <p>wir freuen uns, dass Sie sich für unsere Praxis für moderne Zahnheilkunde interessieren – herzlich willkommen!</p> <p>Die <a href="#"> Homepage </a> soll. Ihnen einen ersten Einblick in das Leistungsspektrum und die Behandlungsphilosophie vermitteln. Es wird Sie interessieren, wie schonend und sorgsam ein Zahnarztbesuch sein kann.</p> <p>Sie sind herzlich eingeladen, sich bei einem Besuch in meiner Praxis mit ihren Fragen und Wünschen anzuvertrauen.</p> <p>Ihre Dr. Dr. Günther Chmelitschek und Dr. Thomas Chmelitschek</p> </div> </div> <div class="col-md-6 wow fadeInDown"> <div class="rigth-bar"> <h1 class="size">Sprechzeiten</h1> <p class="font">Zahnarztpraxis Dr. Dr. Chmelitschek <br/> Stollstr. 6 <br/> 83022 Rosenheim</p> <p>Mo-Fr von 08:00-18:00 Uhr <br/> und nach Vereinbarung</p> </div> </div> <!-- отмена float --> <!--</div>--> </div> <!--row--> </section> </div> <!--carcas--> <footer> <div class="container"> <span class="foot">Zahnarztpraxis Chmelitschek © 2018</span> </div> <br><br><br> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/validator.min.js"></script> <script src="js/select2.full.min.js"></script> <script src="js/wow.min.js"></script> <script src="js/scripts.js"></script> </body> </html> style.css
*{ padding:0; } img{ max-width: 100%; height: auto; border:none; } section{ position: relative; } body { background:#f5f5f5; url(images/body-bg.jpg) top repeat-x; /*font:12px Arial;*/ color:#555555; line-height:1.3; } a{ color:#9dc5f0; } a:hover{ text-decoration:none; } h1{ font: normal 24px 'Times New Roman'; margin-bottom:20px; } h2 { font: normal 20px 'Times New Roman'; margin-bottom:20px; } h3 { font: normal 18px 'Times New Roman'; margin-bottom:20px; } p { font-size:14px; } .row{ } .size { font-family:Georgia, 'Times New Roman', Times, serif; } .karkas { width:755px; margin:0 auto; } .header{ padding:30px 0 0 0; margin-bottom: 20px; height: 100%; min-height: 500px; } .logo{ margin:0 auto 20px auto; display: block; } .menu{ list-style:none; background:#fff; font-size:14px; font-weight:bold; overflow:hidden; border-left:1px solid #f3f3f3; border-top:1px solid #f3f3f3; border-right:1px solid #f3f3f3; border-bottom:1px solid #9dc5f0; position: centre; } .menu li{ float:left; border-left:1px solid #f3f3f3; padding:8px 25px; } menu li:fist-child{ float:left; border-left:none; #f3f3f3; padding:8px 25px; } .menu li a { color:#5f5d67; text-decoration:none; } .menu li a:hover{ text-decoration:underline; color:#9dc5f0; } .main-content{ /*overflow:hidden;*/ } .main-content p{ margin-bottom:20px; } .main-content{ margin-bottom:0px; img{ max-width: 100%; height: auto; } } .main-content-img { position: centre; } #speakers{ padding: 15px 0; border-bottom: 2px solid #f0f0f1; } #speakers h2{ color: #828689; } .large{ color: #828689; font-size: 22px; margin-bottom: 20px; } .content-left{ background: #fff; padding:20px; /*width:420px; height: 300px;*/ float:left; } .rigth-bar{ background: #fff; width:255px; height: 307px; padding:15px 10px 30px 25px; float:left; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:13px ; } .right-bar .size { /* font-family:Georgia, 'Times New Roman', Times, serif;*/ } .footer { clear:both; /*margin:100px;*/ } .foot { position:relative; top: 20px; padding-bottom:30px; font-size:14px; left:20px; color: #b4b3b7 } @media all and (-webkit-min-device-pixel-ratio:0) { .foot { position:relative; font-size:14px; left:120px; color: #b4b3b7 /* для Chrome и Safari */ } } /*@-moz-document url-prefix() {p {color: #f00;}}*/ /*.foot, x:-moz-any-link { position:relative; left:200px; padding:30px 20 20 20; color: #b4b3b7; text-align: left;/* для Firefox и IE7 */ /* } /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { .section-center{ margin-left:20px; } } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { #speakers, { padding: 20px 0; } .content-left{ max-width:465px; margin-right:20px; margin-bottom:20px; } .rigth-bar{ /*height: 364px;*/ } .section-center{ margin-left:0px; max-width: 750px; } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .section-center{ max-width: 550px; margin-left:70px; margin-right:0px; } .main-content-img { max-width:550px; margin-left:70px; } .content-left{ /*max-width:220px;*/ max-width:550px; margin-right:10px; margin-left:70px; margin-bottom:20px; } .rigth-bar{ /*height: 384px;*/ /*max-height: 250px;*/ margin-left:70px; } } @media only screen and (max-width : 600px) { #header{ min-height: 200px; } .section-center{ max-width: 520px; /*margin-left:20px;*/ } .main-content-img { max-width:550px; /*margin-left:20px;*/ #header h1{ font-size: 20px; } .content-left{ max-width:250px; margin-left:0px; margin-bottom:20px; } .rigth-bar{ /*margin-left:2px;*/ } /*.clearfix:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }*/ .section-center{ margin-left:20px; } } * Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { .row-item{ margin-top: 10px; } #header{ min-height: 200px; } .section-center{ max-width: 100px; } #header h1{ font-size: 20px; } .content-left{ max-width:150px; margin-left:20px; margin-right:20px; margin-bottom:20px; } .rigth-bar{ margin-left:20px; } } 