WebサイトのデザインをPhotoshopなどで作成したデザインデータをもとにコーディングをするとき、最終的にはデザインを合わせるという作業が必要になります。仕事であれば、ほぼズレのない状態を求められることもあるかと思います。1pxもずれがないなんてことは難しいですが、ほぼデザイン通りにするには、デザインを重ねて調整します。 そのとき、HTMLのbodyタグの直下に以下のコードを記述して、デザイン合わせをしていました。

              
            <div style="
                position: absolute;
                top: 0;
                left: 0;
                z-index: 20;
                opacity: 0.5;
                width: デザインデータの幅;
                height: デザインデータの高さ;
                ">
                <img src="img/design.png" alt="">
            </div>
            

デザインを上に重ねていると、開発ツールで要素が選択できないので、display:none;を入れて消したり表示したりして調整しています。 レスポンシブデザインでデザインデータと合わせるのは、はじめすごく苦手でした。。何回もやると慣れてきますので、習うより慣れよ、ですね。最初は難しいと思いますががんばってください！