Troubling with using flex

Question

I'm new to web development and I'm trying to do a bit of exercise with flex which i want to try the header of this:

...but somehow I can't make the header have a white background:

body {
  background: gray;
}

header {
  background: white;
}

ul.header-nav {
  list-style: none;
  display: flex;
}

ul.header-nav.left {
  float: left;
}

ul.header-nav.right {
  float: right;
}

<header>
  <nav>
    <ul class="header-nav left">
      <li>Home</li>
      <li>Plans</li>
      <li>Products</li>
      <li>About</li>
      <li id="gift">Gift</li>
    </ul>
    <ul class="header-nav right">
      <li>Help</li>
      <li>Sign In</li>
      <li>Cart</li>
    </ul>
  </nav>
</header>

You don't need to mix `flex` and `float`. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is a useful resource — andy mccullough, Dec 15 '18 at 08:29

score 1 · Answer 1 · answered Dec 15 '18 at 08:32

Use display:flex instead of float

body{
    background: gray;
}

header{
    background: white;
}

nav{
      display: flex;
}

ul.header-nav{
    list-style: none;
    display: flex;
}

ul.header-nav.left{
    float: none;
}

ul.header-nav.right{
    float: none;
}

<header>
    <nav>
        <ul class="header-nav left">
            <li>Home</li>
            <li>Plans</li>
            <li>Products</li>
            <li>About</li>
            <li id="gift">Gift</li>
        </ul>
        <ul class="header-nav right">
            <li>Help</li>
            <li>Sign In</li>
            <li>Cart</li>
        </ul>
    </nav>
</header>

score 1 · Answer 2 · answered Dec 15 '18 at 08:33

You don't need float if you already decided to use flex.

body {
  background: gray;
}

header {
  background: white;
}

ul.header-nav {
  list-style: none;
  display: flex;
}

nav {
  display: flex;
  justify-content: space-between;
}

<header>
  <nav>
    <ul class="header-nav">
      <li>Home</li>
      <li>Plans</li>
      <li>Products</li>
      <li>About</li>
      <li id="gift">Gift</li>
    </ul>
    <ul class="header-nav">
      <li>Help</li>
      <li>Sign In</li>
      <li>Cart</li>
    </ul>
  </nav>
</header>

turbopasi · Accepted Answer · 2018-12-15T08:44:30.703

The problem your is not showing the backgroundcolor, is because it's height is 0px. You can use browser dev tools to verify that. Here was a similar problem discussed Why My Css Code Is Not Working For My Html Header And Footer?

Also you don't need to use float after using display:flex .

* {
  margin: 0;
  padding: 0;
}

body { background: gray; }
header { background: white; }

nav {
  display: flex;
  justify-content: space-between;
}

ul.header-nav {
  list-style: none;
  display: flex;
  padding: 20px;
}


ul.header-nav li {
  margin-right:10px;
}

<header>
  <nav>
    <ul class="header-nav left">
      <li>Home</li>
      <li>Plans</li>
      <li>Products</li>
      <li>About</li>
      <li id="gift">Gift</li>
    </ul>
    <ul class="header-nav right">
      <li>Help</li>
      <li>Sign In</li>
      <li>Cart</li>
    </ul>
  </nav>
</header>

Troubling with using flex

3 Answers3