title: Why does flexbox interfear with offcanvas and search
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="uft-8"&gt;
  &lt;meta name="viewport" content="width-device, initial-scale=1"&gt; 
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://kit.fontawesome.com/55c9ed03d7.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://kit.fontawesome.com/55c9ed03d7.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="jumbotron jumbotron-fluid"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="text-center"&gt;
                  &lt;h3&gt;Domain name&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="position-relative bg-success"&gt;
                  &lt;div class="position-absolute top-0 start-0 mb-2"&gt;
                     &lt;div class="fa-solid fa-bars" data-bs-toggle="offcanvas" data-bs-target="#demo" &gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="position-absolute top-0 end-0"&gt;
                     &lt;div class="search-container mb-2"&gt;
                        &lt;i class="search fa fa-search" data-bs-toggle="modal" data-bs-target="#myModal"&gt;&lt;/i&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="offcanvas offcanvas-start" id="demo"&gt;
          &lt;div class="offcanvas-header"&gt;
              &lt;button type="button" class="btn-close" data-bs-dismiss="offcanvas"&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="offcanvas-body"&gt;
              &lt;h3&gt;hello&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal fade" id="myModal"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                     &lt;button type="button" class="btn-close" data-bs-dismiss="modal"&gt;&lt;btton&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="input-group mb-2"&gt;
                         &lt;input type="text" class="form-control" placeholder="search"&gt;
                         &lt;button class="btn btn-secondary" type="submit"&gt;Go&lt;/button&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
      &lt;div class="container-fluid bg-info"&gt;
            &lt;div class="d-flex  justify-content-evenly"&gt;
                &lt;div class="fas fa-home p-1" style="font-size: 23px; color: white;"&gt;&lt;/div&gt;
                &lt;div class="fa-solid fa-shirt p-1" style="font-size:23px; color:white;"&gt;&lt;/div&gt;
                &lt;div class="fa-solid fa-computer p-1" style="font-size:23px; color:white;"&gt;&lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt; 
  &lt;body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  i am using bootstrap for this i want to make header for a website.here i am having problem in seperating flexbox with offcanvas and search icon. Here flex box gets in between offcanvas and search.
  I want flexbox below offcanvas and search like this<a href="https://i.stack.imgur.com/KNeQn.png" rel="nofollow noreferrer">enter image description here</a>.But i got the result of flexbox in between search and offcanvas like this<a href="https://i.stack.imgur.com/kAMOR.jpg" rel="nofollow noreferrer">enter image description here</a>.</p>