The following code is available:

* { margin: 0; padding: 0; font-family: Bebas Neue, sans-serif; font-stretch: condensed; color: white; } html, body { height: 100%; width: 100%; } body { width: auto; height: auto; margin: 0 auto; overflow-y: scroll; overflow-x: hidden !important; min-width: 320px; max-width: 1920px; } .wrapper { width: 66%; margin: 0 auto; border: 1px solid black } header { display: flex; display: -webkit-flex; display: -ms-flex; flex-direction: row; -webkit-flex-direction: row; -ms-flex-direction: row; justify-content: space-between; -webkit-justify-content: space-between; margin-top: 0.95em; } .logo { width: 110px; background: red } .search_bar { width: 23.9em; height: 1.67em } .search_bar input { font-size: 1.13em; font-stretch: condensed; padding-left: 6px; border: 2px solid black; width: 100%; height: 100%; outline: none; cursor: pointer; color: black; font-weight: bold; text-transform: uppercase; } .search_bar img { position: absolute; top: 24px; } .search_bar input:focus { box-shadow: 0 0 15px 2px #9e9e9e; -moz-box-shadow: 0 0 15px 2px #9e9e9e; -webkit-box-shadow: 0 0 15px 2px #9e9e9e; -ms-box-shadow: 0 0 15px 2px #9e9e9e; } .banner_right { width: 20em; background: green } 
 <!DOCTYPE html> <html> <head lang="en-US"> <meta charset="UTF-8"> <meta name="viewport" content="device-width, initial-scale=1"> <title>Aditii - Main Page</title> <link rel="stylesheet" type="text/css" href="slick/slick.css"> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="wrapper"> <header> <div class="logo"> <a href=""></a> </div> <div class="search_bar"> <input type="text" placeholder="Search"> </div> <div class="banner_right"> </div> <div class="clear"></div> </header> </div> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/script.js"></script> </body> </html>

In this case, the header has a justify-content: space-between property. Despite this, the elements do not stretch across the entire width of the container: https://codepen.io/anon/pen/LXvaGB How to fix this?

  • Try setting the% width for .search_bar, .logo, .banner_right - klifort
  • I tried. Alas, it did not help - there is still space on the right - Alexandr Järvi
  • @ AlexandrJärvi decide, for a start, with the help of which you will impose - float or flex , and then the errors will be much less. - UModel

1 answer 1

Delete this (by the way why do you need it?)

 <div class="clear"></div>

Transform the value into percentages or a wrapper, which is the minimum value and everything will be fine. You can also set input

  height: calc(100% - 4px);

so that it is the same height as the elements on the side.

  • It helped, thanks for the reply - Alexandr Järvi
  • always welcome - Tigran Vardanyan