How to Properly Display Tags on a Blog Post

Hi there, I’m working on my blog and have been struggling with displaying tags at the bottom of the post. I wrote something but if I pass more than 3 tags it goes outside the page, making a user have to drag to see all the tags. I think it’s something caused by display: inline but don’t know what the problem actually is. I’d like them in one line but have it go to the next if the screen is smaller.
Here’s the code:

<div class="section narrow" align="center">
{{ range (.GetTerms "tags") }}
  <h6 class="section narrow" style="border: 1px solid #6166DC; width: auto; display: inline-block; text-align: center; margin: auto; padding: 0 5px 0; color: #6166DC; text-color: #6166DC; border-radius: 25px; margin-bottom: 10px;">
    <a href="{{ .Permalink }}">{{ .Title | urlize }}</a>
  </h6>&nbsp;
{{ end }}
</div>

Your question is off-topic. Development issues not specific to Hugo should be raised elsewhere. You might try Stack Overflow.