taxonomy routing question

[thetemplateblog]

If you look at my page, You will notice a Categories: section at the top.

The URLs are: /categories/branding, /categories/devops, etc...

But if you look at the Categories in the content entries, the URLs are /writing/categories/branding, /writing/categories/devops

This site is working because I have the templates in two places.

How do I modify the inline categories code to show the proper route?

<div class="p-6 border border-gray-300">
    <!-- Use flexbox to align "Categories:" inline with category titles -->
    <div class="flex items-center">
        <h3 class="text-xl font-light text-gray-800 inline-block">Categories:</h3>

        <div class="flex items-center ml-4 flex-wrap">
            {{ taxonomy:categories }}
                <a href="{{ url }}" class="text-red-500 hover:text-red-700 after:content-['|'] after:text-gray-500 last:after:content-[''] after:mx-2">{{ title }}</a>
            {{ /taxonomy:categories }}
        </div>
    </div>
</div>