Html 边框底部未占据整个宽度

我希望在中型和大型设备中有一个占据整个页面宽度的菜单，在小型设备中，我希望垂直显示菜单项。我使用了一个网格，但我也希望在活动列表项下有一个红色边框底部（位于列表项底部）并悬停。但此红色边框底部未占据列表项的全部宽度。你知道为什么吗

例如：

Html:

将此添加到您的LI：

     flex: 1 0 auto;

或者更简单：

flex:1

将
flex:1
添加到
li
中，使其占据
ul
中的所有可用空间-请参见下面的演示：


ul{
列表样式：无；
}
梅努利斯特先生{
显示器：flex；
对齐内容：居中对齐；
证明内容：周围的空间；
}
李先生{
左边框：1px纯色灰色；
填充：20px 15px 20px 15px；
弹性：1；
}
梅努利斯特先生{
颜色：#fff；
}
李美男：第一个孩子{
左边框：0；
边框底部：5px纯红；
}
李曼努利斯特：悬停{
边框底部：5px纯红；
光标：指针；
}
}


项目
项目
项目
项目

因为您在
li
元素中提供了填充，请删除该填充，然后告诉me@Ashishsah因为什么？
ul{
  list-style:none;
}
.MenuList{
  display: flex;
  align-content: center;
  justify-content: space-around;
  li{
    border-left: 1px solid gray;
    padding: 20px 15px 20px 15px;

    a{
      color:#fff;
    }
    &:first-child{
      border-left: 0;
      border-bottom: 5px solid red;
    }
    &:hover{
      border-bottom: 5px solid red;
      cursor: pointer;
    }
  }
}

     flex: 1 0 auto;