title: Stretching content inside a block to full width
body: <p>There is a site header</p>
  <p><a href="https://i.stack.imgur.com/qCEbL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qCEbL.png" alt="needblock" /></a></p>
  <p>In it, the Search among 10,000 products and the Find button should be located across the entire width of the block (and not as shown in the figure - pressed to the left). I give the code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pageHeader .headerinsidessecondrow {
    padding-left: 74px;
    padding-right: 74px;
    width: 100%;
    height: 57px;
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    font: 16px "PT Sans", sans-serif;
  }
  
  .catalog {
    margin-left: auto;
    margin-right: auto;
    flex: 20%;
  }
  
  .catalog .catalogbutton {
    margin-left: auto;
    margin-right: auto;
  }
  
  .betweenspace {
    flex: 15%;
  }
  
  .inputsearch {
    margin-left: auto;
    flex: 30%;
    /*border-bottom-width: 0px;*/
    /*height: 32px;*/
  }
  
  .searchbutton {
    margin-left: auto;
    flex: 10%;
    height: 30px;
  }
  
  .findinfo {
    flex: 40%;
  }
  
  .secondbetweenspace {
    flex: 5%;
  }
  
  .loginandsignup {
    margin-left: auto;
    margin-right: 0px;
    display: flex;
    align-items: center;
    flex: 10%;
    display: flex;
    justify-content: flex-end;
    align-self: center;
  }
  
  .basket {
    /*margin-left: auto;*/
    margin-right: 0px;
    display: flex;
    align-items: center;
    flex: 10%;
    display: flex;
    justify-content: flex-end;
    align-self: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="headerinsidessecondrow"&gt;
    &lt;span class="catalog"&gt;
      &lt;button class="catalogbutton"&gt;Каталог товаров&lt;/button&gt;
  &lt;/span&gt;
  
    &lt;span class="betweenspace"&gt;
  &lt;/span&gt;
  
    &lt;span class="findinfo"&gt;
          &lt;input placeholder="Поиск среди 10000 товаров" class="inputsearch" /&gt;
              &lt;span class="searchbutton"&gt;
                  &lt;button&gt;Найти&lt;/button&gt;
              &lt;/span&gt;
    &lt;/span&gt;
  
    &lt;span class="secondbetweenspace"&gt;
  &lt;/span&gt;
  
    &lt;span class="loginandsignup"&gt;
      &lt;span class="loginsignupimg"&gt;
          &lt;img src="../images/header_profile-icon.png"&gt;
      &lt;/span&gt;
    &lt;span class="loginsignuptext"&gt;
          Вход и регистрация
      &lt;/span&gt;
    &lt;/span&gt;
  
    &lt;span class="basket"&gt;
      &lt;span class="loginsignupimg"&gt;
          &lt;img src="../images/header_cart-icon.png"&gt;
      &lt;/span&gt;
    &lt;span class="loginsignuptext"&gt;
          Корзина
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Tell me how to achieve stretching of the above element to the full width of the block in which it is contained.</p>