[HTML5,CSS3,Scss]widthのレスポンシブ対応について

widthを使い％で要素の幅を指定し、PC〜タブレット画面までの間でレイアウトが崩れないようにしたいです。
しかし、画面を縮めた際に右側から縮小される（？）ので、レイアウトが崩れてしまいます。

画面幅を小さくすると、角がなくなってしまい、文章も想定の位置からずれてしまうという状況です。

タブレット幅でwidthとclip-pathを指定し直してみましたが変化ありませんでした。
左側から縮めるよう指定する方法も探しましたが、見つからなかったため方法をご教示いただけると嬉しいです。

※ちなみにクラス.slideの画像はフェードで３枚スライド

HTML
1<div class="services">
2    <div class="sr">
3    <h3>タイトル</h3>
4    <p class="title-p">サービス内容です</p>
5    <p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>
6    </div>
7    <div class="a-link">
8    <div href="#" class="slide" id="makeImg">
9      <a href="#" class="service-link">
10    <img class="simg01" src="img/"   alt="サンプル１">
11    <img class="simg02" src="img/"    alt="サンプル２">
12    <img class="simg03" src="img/"    alt="サンプル３">
13  </div>
14  <p class="contents"></p></a></div>
15</div>

SCSS
1//スライドの設定
2.services {
3    .slide {
4  　　position   : relative;
5  　　overflow   : hidden;
6  　　max-width      : 80%;
7  　　height     : 450px;
8  　　　@media (max-width: 1280px) {
9  　　　　height: 300px;
10  　　　}
11　　　}
12/*=== 画像の設定 ======================================= */
13.slide img,
14.slide02 img {
15  display    : block;
16  position   : absolute;
17                      /* 画像のサイズを表示エリアに合せる */
18  width      : inherit;
19  height     : inherit;
20  opacity    : 0;
21  animation  : slideAnime 12s ease infinite;
22}
23 /*=== スライドのアニメーションを段差で開始する ========= */
24.slide img:nth-of-type(1),
25.slide02 img:nth-of-type(1) { animation-delay: 0s }
26.slide img:nth-of-type(2),
27.slide02 img:nth-of-type(2) { animation-delay: 4s }
28.slide img:nth-of-type(3),
29.slide02 img:nth-of-type(3) { animation-delay: 8s }
30 /*=== スライドのアニメーション ========================= */
31@keyframes slideAnime{
32   0% { opacity: 0 }
33   1% { opacity: 1 }
34  33% { opacity: 1 }
35  34% { opacity: 0 }
36 100% { opacity: 0 }
37}
38  img {
39   clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
40  }
41}
42　　//見出しボタンの設定
43    .service-link {
44      p {
45    　　position: relative;
46    　　top: -80px;
47    　　background: #0F1D31;
48    　　color: #ffffff;
49    　　font-family: $font3;
50    　　text-align: center;
51    　　font-size: 30px;
52    　　width: 18%;
53    　　padding: 10px 0;
54    　　letter-spacing: 1px;
55    　　　&:hover::before {content: "Gallery >>";}
56　　　}
57　　　　//画像にフィルターをかける
58    　　filter: brightness(50%) blur(1px);
59  　　　　&:hover {
60    　　　filter: brightness(100%);
61    　　　transition: 0.4s ;
62  　　　　}
63      .contents {
64        margin-left: 65%;
65        　&::before {content: "テキスト";}
66        @media (max-width: 1280px) {
67          margin-left: 25%;
68        }
69      }
70    }
71　　//説明文
72    .sr {
73    　margin-left: 70%;
74    　text-align: center;
75  　　position: absolute;
76  　　left: 6.5%;
77  　　margin-top: 90px;
78  　　line-height: 24px;
79  　　　h3 {
80    　　letter-spacing: 1px;
81    　　font-weight: 600;
82    　　font-size: 32px;
83    　　margin-bottom: 5px;
84  　　　}
85  　　.title-p {
86    　　margin-bottom: 40px;
87  　　}
88  　　@media (max-width: 1280px) {
89    　　margin-top: 30px;
90    　　left: 8%;
91    　　　h3 {
92      　　font-size: 24px;
93      　　margin-bottom: 3px;
94    　　　}
95    　.title-p {
96     　 margin-bottom: 20px;
97      　font-size: 14px;
98    　}
99    　.txt {
100     　 font-size: 14px;
101    　　}
102　　　}
103　}
104}