Попробуй сделать ей display: inline-block, она будет занимать ширину по контенту

Попробуй jsом менять ей Viewbox в атрибутах, не уверен что сработает, но можешь попробовать поэкспериментировать с этим вьюбоксом

Вот примерно так, только не используйте фиксированные ширину/высоту, как это делал я, у вас будет контент внутри, регулируйте паддингами и марджинами.
https://codepen.io/DrWeyber/pen/MWeawxG - Мой код
https://frontender.info/a-guide-to-flexbox/ - Советую изучить флексы для такого дела ;)

smoothscroll.js, перевожу документацию

Добавляешь перед закрывающим body

<script src="path/to/smooth-scroll.polyfills.min.js"></script>

или
CDN в хедере

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>

Создаёшь ссылку и якорь (айди любые)

<a data-scroll href="#bazinga">Anchor Link</a>
...
<div id="bazinga">Bazinga!</div>

Тоже внизу

<script>
	var scroll = new SmoothScroll('a[href*="#"]');
</script>

Можешь скорость регулировать

var scroll = new SmoothScroll('a[href*="#"]', {
	speed: 300
});

В доке вцелом всё понятно