https://codepen.io/Mr-Every-thing/pen/MWZKmJp

این لینک codepen هست

لطفا راهنمایی کنید

درود

دلیلش پدینگی هست که موقع هاور ست کردید. اگر کامنتش کنید میبینید که دیگه فاصله نمیندازه:

li a:hover{
    background-color: aqua;
/*     padding: 20px; */
    border-bottom: 5px dotted yellowgreen;    
}

اگر کامنتش کنم دیگه زمان هاور background-color اش کل محدوده بالا تا پایین container اش رو نمیپوشونه. اگر بخوام این اتفاق بیفته باید چکار کنم؟

باید کلاس بالا رو به این صورت بنویسید:

li:hover{
    background-color: aqua;
    border-bottom: 5px dotted yellowgreen;    
}

و به کلاس اصلی پدینگ بدید:

.x1 li{
    display: inline-block;
    width:100px;
    padding-top: 20px;
    padding-bottom: 20px;
}