No space between elements in navbar with Bootstrap 4

Question

I made a navbar menu with Bootstrap 4 and all the elements are together with no space between them. Instead of reading like "Element Element Element Element Element" is appears as "ElementElementElementElementElement".

It can be fixed with css, but shouldn't bootstrap take care of that?

This is my code

<div class="wrapper navbar-expand-md">
<nav id="nav-main navbar" class="nav-main navbar" role="navigation">
    <div class="container-fluid">
        <h1 class="hdr-logo navbar-brand" role="banner">
            <a class="hdr-logo-link" href="http://localhost/mypage" rel="home">mypage</a>
        </h1>
        <ul class="nav navbar-nav">
            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-4">
                <a href="http://localhost/mypage/pagina-ejemplo/">
                    <span data-letters="Página de ejemplo">Página de ejemplo</span>
                </a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pagina 1
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="http://localhost/mypage/titulo-pagina-1/titulo-pagina-1-a/">
                            <span data-letters="Titulo Página 1.a">Titulo Página 1.a</span>
                        </a>
                    </li>

                    <li>
                        <a href="http://localhost/mypage/titulo-pagina-1-b/">
                            <span data-letters="Titulo página 1.b">Titulo página 1.b</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
                <a href="http://localhost/mypage/titulo-pagina-2/">
                    <span data-letters="Titulo página 2">Titulo página 2</span>
                </a>
            </li>
            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
                <a href="http://localhost/mypage/titulo-pagina-3/">
                    <span data-letters="Titulo página 3">Titulo página 3</span>
                </a>
            </li>
            <li class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-57 current_page_item menu-item-87">
                <a href="http://localhost/mypage/about-us/">
                    <span data-letters="About Us">About Us</span>
                </a>
            </li>
        </ul>
    </div>
</nav>
<!-- #nav -->

Answer 1

You are missing the class nav-link in the link tags. This class add padding to the link giving more air between the elements, so change this:

<a href="http://localhost/mypage/pagina-ejemplo/">
    <span data-letters="Página de ejemplo">Página de ejemplo</span>
</a>

to this:

<a class="nav-link" href="http://localhost/mypage/pagina-ejemplo/">
    <span data-letters="Página de ejemplo">Página de ejemplo</span>
</a>