I use a flexible box for my navigation bar, it works fine, but when the text inside the li elements falls on a new line, I would like the actual width of the li element to be reduced. For example, for example:
Normal Width: 
narrow: 
The empty space to the left and right of the text “Dance and Performance” means that the elements overlap and look terrible.
How can I get li for auto width?
header { height: auto; margin: auto; background-color: #58595B; z-index: 100; max-width: 1200px; width: 95%; } ul.header_items { list-style: none; margin-left: auto; margin-right: auto; display: flex; justify-content: space-around; } .header_items li { background-color: #7E489C; text-align: center; vertical-align: middle; text-transform: uppercase; box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.2); transition: 0.4s; padding: 2px; width: auto; } .header_items li a { font-family: 'Norwester-Regular', sans-serif; color: #ffffff; font-size: 15pt; text-align: center; vertical-align: middle; text-transform: uppercase; }
<header id="static_nav"> <ul class="header_items" style="padding-left:0px;"> <li id="header_item_first"><a href="home" id="index_button">Home</a></li> <li id="header_dp"><a href="dance-performance" id="dance_button">Dance & Performance</a></li> <li id="header_af"><a href="adult-fitness.php">Adult & Fitness</a></li> <li id="header_w"><a href="https://www.millyacademy.com/workshops.php">Workshops</a></li> <li id="header_cc"><a href="https://www.millyacademy.com/corporate-celebrations.php">Corporate & Celebrations</a></li> <li id="header_g"><a href="https://www.millyacademy.com/showcase.php">Gallery</a></li> <li id="header_s"><a href="https://www.millyacademy.com/shop.php">Shop</a></li> <li id="header_c"><a href="https://www.millyacademy.com/contact.php">Contact Us</a></li> <li id="button_student_login"><a href="student-login" id="login_button">Student Login</a></li> </ul> </header>
source share