جلوگیری از تکون خوردن

خب ببینید دوست عزیز، وقتی شما display یک عنصر رو در حالت none قرار میدید، به این صورت رفتار میکنه که انکار اصلا اون عنصر در DOM وجود نداره و بدیهی است که عناصر مجاور جای اون رو پر کنند

برای حس مشکل شما، پیشنهاد میدم از خصیصه ی opacity استفاده کنید، که عنصر شما رو اگه مقدار ۰ بهش بدید نامرئی میکنه و اگه ۱ بدید نمایش میده، در واقع عنصر شما موجوده اما دیده نمیشه ، برعکس حالت display: none

<ul class="nav">
  <li class="hidden">this is a box </li>
  <li>this is a box </li>
  <li>this is a box </li>
  <li>this is a box </li>
  <li>this is a box </li>
  <li>this is a box </li>
</ul>

.nav li {
  display: inline-block;
  padding: .5em 1em;
  background-color: coral;
 }
.hidden {
  opacity : 0;
 }

$(".nav li").on("click",funcction(){
  $(this).addClass("hidden");
 });