How to make adaptive buttons, when you increase the screen size, all the buttons fly away. Here is the code
.body { height: 100%; margin: 0; padding: 0; } .btn-space { margin-right: 5px; } .save_button { min-width: 80px; max-width: 80px; } div.btn-group.btn-lgg { margin: 0; padding: 0; } .btn-lg { width: 362px; position: relative; } .btn-lgg { width: 179px; height: 60px; } .btn-lggg { width: 222.47px; height: 46px; } .btn-lgggg { width: 222.47px; height: 41px; } input[type="text"] { width: 300px; height: 40px; padding-left: 25px; } input::placeholder { text-indent: 0.1em; } div { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; } div>hr { width: 125px; height: 1px; background: gray; } .gray { color: gray; /* Цвет символа */ margin-left: 3px; } .price { color: gray; } .flex { display: flex; justify-content: space-between; flex-wrap: wrap; } .dropdown-menu { list-style-type: none; max-height: 250px; overflow-y: scroll } :focus { outline: none !important; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Block</title> <link rel="stylesheet" type="text/css" href="struct.css" /> <script type="text/javascript" id="sourcecode"> $(function() { $('.scroll-pane').jScrollPane(); }); </script> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <div class="row" style="margin-left:-10px; margin-top:200px;margin:display;"> <div class="container"> <div class="btn-group"> <form> <input type="text" value="" placeholder="Страна, курорт или отель" style=" width: 276px;height: 60px;" data-toggle="dropdown" autofocus> <i class="fas fa-map-marker-alt" style="margin-left:-275px;font-size:18px;color:#059bce;"></i> <ul class="dropdown-menu" role="menu"> <li class="list-group-item"><input type="checkbox">Все курорты, Турция</li> <div> <hr> <h6 class="dropdown-header">Популярные курорты</h6> <hr> </div> <li class="list-group-item"> <div class="flex"> <div class="left"><input type="checkbox"> Аланья,<span class="gray">Турция</span></div> <div class="right"><span class="price">от 17 701 р./чел.</span></div> </div> </li> <li class="list-group-item"> <div class="flex"> <div class="left"><input type="checkbox"> Анталья,<span class="gray">Турция</span></div> <div class="right"><span class="price">от 18 609 р./чел.</span></div> </div> </li> <li class="list-group-item"> <div class="flex"> <div class="left"><input type="checkbox"> Белек,<span class="gray">Турция</span></div> <div class="right"><span class="price">от 37 896 р./чел.</span></div> </div> </li> <li class="list-group-item"><input type="checkbox"> Бодрум,<span class="gray">Турция</span></li> <li class="list-group-item"> <div class="flex"> <div class="left"><input type="checkbox"> Кемер,<span class="gray">Турция</span></div> <div class="right"><span class="price">от 15 401 р./чел.</span></div> </div> </li> <li class="list-group-item"><input type="checkbox"> Мармарис,<span class="gray">Турция</span></li> <li class="list-group-item"> <div class="flex"> <div class="left"><input type="checkbox"> Сиде,<span class="gray">Турция</span></div> <div class="right"><span class="price">от 19 959 р./чел.</span></div> </div> </li> <div> <hr> <h6 class="dropdown-header">Остальные курорты</h6> <hr> </div> <li class="list-group-item"><input type="checkbox"> Анкара,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Даламан,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Дидим,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Каппадокия,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Кушадасы,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Манавгат,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Мугла,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Олюдениз,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Памуккале,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Саригерме,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Стамбул,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Фетхие,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Финике,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Чешме,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Эрджияс,<span class="gray">Турция</span></li> </ul> </form> </div> <!-- --> <div class="btn-group"> <button type="button" class="btn btn-light btn-lgg" style="margin-left:-60px;data-toggle=" dropdown "> <i class="fas fa-calendar-alt "style="margin-left:-140px;font-size:22px;color:#059bce; ""></i> </button> </div> <!-- --> <div class="btn-group"> <button type="button" class="btn btn-light btn-lgg" data-toggle="dropdown">Test 3</button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- --> <div class="btn-group"> <button type="button" class="btn btn-light btn-lgg" data-toggle="dropdown">Test 3</button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> </div> <div class="row2" style="margin-left:-41.5%; margin-top:-6.0%;margin:display;"> <div class="container"> <div class="btn-group" <div class="dropdown"> <button type="button" class="btn btn-white btn-lgggg" data-toggle="dropdown">Город вылета: </button> <ul class="dropdown-menu" style="min-width:280px;" role="City"> <li><a href="#">Москва</a></li> <li><a href="#">Санкт-Петербург</a></li> <li><a href="#">Абакан</a></li> <li><a href="#">Астрахань</a></li> <li><a href="#">Барнаул</a></li> <li><a href="#">Белгород</a></li> <li><a href="#">Благовещенск</a></li> <li><a href="#">Брянск</a></li> <li><a href="#">Владивосток</a></li> <li><a href="#">Владикавказ</a></li> <li><a href="#">Волгоград</a></li> <li><a href="#">Воронеж</a></li> <li><a href="#">Екатеринбург</a></li> <li><a href="#">Новосибирск</a></li> <li><a href="#">Нальчик</a></li> <li><a href="#">Мурманск</a></li> <li><a href="#">Нижний Новгород</a></li> </ul> </div> </div> </div> <button type="button" class="btn btn-warning btn-lgggg" style="margin-left:610px; margin-top:-65px;">Горящие туры <span class="tab-search-hot-tours-discount">-50%</span></button> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html> 