Did you make the mesh properly?

Question

css

Code codepen.io/anon/pen/qOXLLE
There are 3 logo blocks, a form, and a registration form.
I traded in Photoshop the percentage of 3 blocks, and it turned out 17.3 logo, the form width: calc(65.5% - 175px); 65.5% and and 175px to the left of the logo margin is 150px and to the right of the registration form is 25px and the registration form itself takes 17.2. All together 17.3 + 65.5 + 17.2 = 100%. Everything seems to be correct.
This offset is confusing starting from 937px and below the registration form begins to slide under the search form and what is most incomprehensible is the submit in the form also starts to move to the right (see screenshot screenshot.ru/c77095fd6a83fe5e1af401c75ad3e7e1). Why is that?
I understand that when such problems begin, they connect media queries and, as I understand it, for example, you can remove the registration form for the tablet version and stretch the search form by -17.2% of the registration form and + 17.2% to 65.5 and = 82.7% registration form width? Well, since the registration form now has no indent on the right, you can write not width: calc(65.5% - 175px) but width: calc(65.5% - 150px) and remove the right margin? Am I thinking right?

Answer 1

Some kind of game.
Fix the width of the block:
- minimum
- maximum
- or the only one if the layout is static
3 blocks inside arrange in a row in one of the ways (float / inline-block / table / flexbox)
As for the width of the blocks, in the correct layout it should be measured in columns: google 960gs and Twitter bootstrap.
If the layout is not on the grid, then curse the designer in the dirtiest way.
The block looks like this

<header>
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="auth"></div>
</header>

header {
  width: 960px;
  // clearfix...
}
.logo,  .nav,  .auth {
  float: left;
   width: 33.3333%;
}