Flexbox weirdness

[lemmingsoda]

I’m trying Flexbox for the first time, and there is a mysterious box-shadow on the child items. I haven’t included any box shadows anywhere on the page.

I’m also having trouble with centering the container. Even when I set it to justify-center, it’s slightly off-center. Any ideas why these issues might be happening?

#container {
    display: flex;
    width: 100vh;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    margin: auto;
    margin-top: 50px;
    gap: 5%;
          }

  li.ply { 
      font-size: 40px;
      text-align: center;
      font-weight: bold;
      border-radius: 15px;
      width: 1;
      height: 1;
      padding: 10%
          }        

[LucLH]

Hello @lemmingsoda

About the shadow issue, check what does the gap property in your #container. For the center issue, you used the unit vh for the width. vh is an unit for the height of the viewport. Also, the value 100 takes then all the height of the viewport and it would be the same for the vw. Try another unit such as the vw maybe.