svg画像とテキストが重なってしまう。

Question

前提・実現したいこと

タイトルの下にsvg画像を配置したい

発生している問題・エラーメッセージ

タイトルとSVG画像が重なってしまう。

エラーメッセージ

該当のソースコード

htmlソースコード
<h1 class="responsive">works</h1>
<div class="works-group">
　<div class="sample-icon">
　　<a href="#"><img src="asset/SVG/lpsample.svg"></a>
　</div>

CSSコード
.responsive{
        display: block;
        text-align: center;
    }

#works .sample-icon{
        width: 50vw;
    }

試したこと

marginなどで余白の設定をしたが、変化はなし

補足情報（FW/ツールのバージョンなど）

イラストレーターにて書き出したSVG画像です。
コンテンツ全体の横幅は375pxと指定しています。

Answer 1

記載したコードだけでは原因は分かりません。
ということで質問文に記載したソースコード外での何らかの指定が影響している可能性が非常に高いです。
h1やdiv,imgなどを検証ツール（safariなら要素を右クリックして「要素の詳細を表示」）にてどのようなcssが適用されているか確認しましょう。
意図しないネガティブマージンがついていたり、positionがabsoluteになってたりしていそうです。

少なくとも、

#works .sample-icon{
        width: 50vw;
    }

はどの要素にも適用されていません。（そもそもidがworksの要素がない）