Uneven spacing in footer note with design of a website-CodePudding

As a start-up, we are currently developing our website. We have a bit of a programming background, but mainly in Bio-informatics, so HTML and Javascript are unfamiliar. So that's why we will ask this 'stupid' question. We are currently working in WordPress, and we have an issue with the spacing within our Footer Note. There is a dot between the items, but the spacing between these items and dots isn't the same. So it is visually uneven. We have looked at the code, but we can't find this spacing problem. This photo represents the problem, to show it visually. Besides that, we use the following code for the Footer

    <footer class="footer text-center">
        <div class="container"> 
            <img src="<?= path();?>assets/images/footer-logo.png" alt="" class="footer__logo">
            <p>&copy; <?php echo date('Y');?> Bionomic B.V.</p>
            
            <ul class="d-flex flex-wrap align-items-center justify-content-center">
                <?php wp_nav_menu( array( 'container' => '', 'theme_location' => 'footer', 'items_wrap' => '%3$s') ); ?>    
                <li> <a href="https://www.bionomic.nl/" traget= >Home</a></li>
            </ul>
        </div>
    </footer>
    <!-- /* Footer */ -->

    <a href="#" class="scrollup"></a>
</div>
<!-- /* Outer */ -->

<?php wp_footer(); ?>

<!-- Attched assets/javascripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="<?= path();?>assets/javascripts/slick.js"></script>
<script src="<?= path();?>assets/javascripts/global.js"></script>

</body>
</html>

If there is anyone who can see the problem in the code, it would be a great help!

Thank you in advance!

CodePudding user response：

I suspect that the dot is a regular type of dot seen at the beginning of a List Items. You are using an Unordered List <ul> and this has individal Lines <li> in it. At the beginning of those lines will be a dot unless you dicate otherwise.

If... the list is set up to appear in-line then I do think it would appear that the dots are between your menu items.

Try this in your CSS. It will affect all lists on your website.

<!-- In your CSS -->

ul {
  list-style:none;
}

Or, to affect only that one list. Add a Class to it.


<!-- In your CSS -->

ul.no-dots{
  list-style:none;
}

<!-- Then in your HTML -->

 <ul class="no-dots d-flex flex-wrap align-items-center justify-content-center">

CodePudding user response：

In order to remove the dot before your footer links please use the CSS code.

footer ul {
list-style:none;
}