Doubt with Flex-Box CSS

Question

I am excited about a flex display issue in this code snippet: https://jsfiddle.net/h6tgnu19/7/

I want the box to stick to the top of the page, regardless of the scroll menu or not. That there is no margin. I tried margin: 0 in the Nav element, but it did not function.

And as for the search box, shouldn’t it also be bundled with the Nav? How do I include inside the menu?

To finish. How could you make the same menu using block or inline-block? I tried and never appeared if you want the box.

Grateful

Answer 1

You need to take away the standard margin of body:

body {
    background: #f9f9eb;
    margin: 0; ← ← ← ← ← ← ← ←
}

Also take out the padding of <ul>, which is the class .navigation:

.navigation {
    list-style: none;
    margin: 0;
    padding: 0; ← ← ← ← ← ← ← ←
    background: #0b5eec;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
}

To div that holds your search box is outside the nav:

<nav>
   ...
</nav>
<div class="search-box">
   ...
</div>

Place at the end of nav and insert styles into the CSS to center and give an upper margin of the menu:

.search-box{
   text-align: center;
   margin-top: 15px;
}

How does it look:

body {
   background: #f9f9eb;
   margin: 0;
}

nav{
   background: #0b5eec;
}

.navigation {
   list-style: none;
   margin: 0;
   padding: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-flow: row wrap;
   flex-flow: row wrap;
   justify-content: center;
}

.search-box{
    margin: 15px 15px 0;
}

.navigation a {
   text-decoration: none;
   display: block;
   padding: 15px;
   color: white;
}

.navigation a:hover {
   background: #000;
   text-decoration: underline;
}

<header>
  <nav>
      <ul class="navigation">
          <li>
              <div class="search-box">
                <label>
                  <input name="search-box" value="Search..."/>
                </label>
              </div>
          </li>
          <li><a href="#">Index</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </nav>
</header>