Issue with styling li in carousel navigation - html

Question

I'm working on "Related Articles" widget carousel navigation in WordPress. Widgets is working fine and now I'm working on styling part.
This is what I currently have:
This is what I want to achieve:
The problem is that I'm stuck on styling li. The problem is that I'm trying first of all to add width and height even with !important and it's still not re-sizing. So I need to split this carousel navigation into 8 similar parts. I think display:inline / display:inline-block might cause this issue.
CSS:
div.carousel_navigation {
display: inline-block;
background: #eeebe7;
width: 224px;
position: relative;
border-right: 1px solid #b1afa9;
border-left: 1px solid #b1afa9;
border-bottom: 1px solid #b1afa9;
}
ul li.prev-article, ul li.next-article {
display: inline;
width: 28px;
height: 20px;
}
li.nav-item-links {
display: inline;
width: 28px;
height: 20px;
}
PHP:
<div class="carousel_navigation">
<ul>
<li class="prev-article"><a class="prev-article"><</a></li>
<?php $count = 1; foreach( $related_posts_guides as $post): // variable must be called $post (IMPORTANT) ?>
<li class="nav-item-links">
<a href="#item_<?php echo $count; ?>">
<?php echo $count; ?>
</a>
</li>
<?php $count++; endforeach; ?>
<li class="next-article"><a class="next-article">></a></li>
</ul>
</div><!-- .carousel_navigation -->
Thank you in advance!

Answer 1

That's because your li elements are inline. If you want them to be in line with eachother, but also stylable with properties like height and width, you'll need to set them as inline-block instead:
ul li.prev-article, ul li.next-article,
li.nav-item-links {
display: inline-block;
width: 28px;
height: 20px;
}
Note that I've also joined both of your selectors with a comma as their style properties were identical.