How to change the width of the blocks?

Question

css

There is such a panel:

As planned, on small screens it collapses to icons:

But I want the icons to stretch to the entire width of the parent and have one width (20%), but it doesn’t work ...
here is the HTML:

<nav class="uk-navbar">
    <a href="#" class="uk-navbar-brand uk-hidden-small">
        <span class="uk-icon-slack"></span> Project.name
    </a>

    <div class="uk-navbar-flip">
        <ul class="uk-navbar-nav">
            <li class="uk-visible-small">
                <a href="#">
                    <span class="uk-icon-reorder"></span>
                </a>
            </li>
            <li class="uk-visible-small">
                <a href="#">
                    <!-- тут много HTML - сократил -->
                    Messages
                </a>
            </li>
            <li class="uk-visible-small">
                <a href="#">
                    <!-- тут много HTML - сократил -->
                    Events
                </a>
            </li>
        </ul>
    </div>
</div>

I've tried using media queries to add:

.uk-navbar .uk-navbar-flip .uk-navbar-nav ul li a
{
  width: 20%;
}

But didn't get the desired result...

Answer 1

1. The parent itself must have a width of 100%.
2. Fill in parent elements that have display: table-cell;