Assessment wanted for Flexbox layout 1 skill test Task 4

Hi! I am working on Task 4 from this Test Your Skills:

I am stuck on two things:
1 - how to get the second and third rows of

  • s to display per the example. I tried wrapping the
      in a that I set to flex-flow: row-wrap.

      2 - how to get the entries to take up the entirety of the display box. I tried wrapping the I added above in a

      in order to get it centered on the page – this worked successfully. But how do I get it to subsume the entire page?

      Link to code: https://codepen.io/jschubach/pen/gOrrpVj

  • Hello @juliaschubach

    you doing great well done
    1 - how to get the second and third rows of i replaced the code in your li to only include the following line
    padding-right:17px;
    this will increase the padding on the right of the words which will make the second and third line include only 3 item

    or to get a closer look to the screen shot
    you can used this one

    li:nth-child(n+4) {
    padding-right:35px;
    }

    which will add padding only to the 5th to the last item of the list

    2)how to get the entries to take up the entirety of the display box. I tried wrapping the I added above in a

    if you check the code scroll a little above your ul selector
    you would find another ul selector that has the following

    ul {
    width: 450px;
    list-style:none;
    padding: 0;
    margin: 0;
    }
    you notice here that ul has width 450px if you like you can change this to 100%
    or just add this line to your ul
    width: 100%;

    but in this case you would need to do more padding and margin

    the screen shoot only show the the 450px area not the entire page that why maybe you get confused by it

    hope that help and have a nice day :slight_smile: