カラムとの間の余白を広げつつ、スマホサイズでも表示位置をずらさずに表示させたい。

前提・実現したいこと

こんにちは！１つ質問させて下さい。
現在、bootstrapを使ってサイト制作を勉強しています。画像の矢印のように、カラムとの間の余白を広げつつ、スマホサイズでも表示位置をずらさずに表示させたいです。
初歩的な質問で大変恐縮ですが、分かる方おりましたらアドバイスを頂きたいです。よろしくお願いします。

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

カラム分けのエリアを作るrowに対してmarginで余白を指定しました。広くなったのですが、スマホサイズまで反映されてしまうのか、横にずれてしまいます。

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10
11    <script src="https://kit.fontawesome.com/8b5cdbe473.js" crossorigin="anonymous"></script>
12    <link href="css/style.css" rel="stylesheet">
13
14    <title>SAMPLE LP</title>
15  </head>
16
17
18  <body>
19
20<div class="height"></div>
21
22<div class="container">
23  <div class="row">
24    <div class="col-lg-5">
25    <p class="main-h6 mb-3">
26      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
27    </p>
28    <p class="m-h6 h6 mb-5 ">
29      <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a>
30    </p>
31    </div>
32    <div class="sumple col-lg-5 ml-5">
33      <div class="mb-3">
34      <i class="fa fa-check text-primary mr-2"></i>
35      <span class="sub-h6">
36        Lorem ipsum dolor sit amet, consectetur
37      </span>
38    </div> 
39      <div class="mb-3">
40      <i class="fa fa-check text-primary mr-2"></i>
41      <span class="sub-h6">
42        Lorem ipsum dolor sit amet, consectetur
43      </span>
44    </div> 
45      <div class="mb-3">
46      <i class="fa fa-check text-primary mr-2"></i>
47      <span class="sub-h6" >
48        Lorem ipsum dolor sit amet, consectetur
49      </span>
50    </div> 
51      <div class="mb-3">
52      <i class="fa fa-check text-primary mr-2"></i>
53      <span class="sub-h6">
54        Lorem ipsum dolor sit amet, consectetur
55      </span>
56    </div> 
57      <div class="mb-3">
58      <i class="fa fa-check text-primary mr-2"></i>
59      <span class="sub-h6">
60        Lorem ipsum dolor sit amet, consectetur
61      </span>
62    </div> 
63      <div class="mb-3">
64      <i class="fa fa-check text-primary mr-2"></i>
65      <span class="sub-h6">
66        Lorem ipsum dolor sit amet, consectetur
67      </span>
68    </div> 
69  </div>
70</div>
71
72</main>
73
74
75    <!-- Optional JavaScript -->
76    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
77    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
78    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
79    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
80  </body>
81</html>
82
83
84![イメージ説明](d4ffeb76d87aaf52acc5a4e09c09af53.png)
85
86
87css
88.height {
89  height:150px;
90}
91
92/* 780pxより小さい画面サイズ */
93@media screen and (max-width: 780px) {
94.sumple {
95margin-right: 30%;
96}
97

試したこと

メディアクエリで同じく、marginで余白を指定してみましたが、テキストが改行され、幅が狭くなってしまいます。

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

bootstrap 4.5.0を使用しています。

Lhankor_Mhy

2021/02/06 04:33

.sumple { margin-right: 30%; } というコードがありますが、右側に余白をつけたい、ということでいいでしょうか？カラムとの間に余白をつけるのであれば左側ではないかな、とも思えるのですが、それは気にしなくていいでしょうか？また、「カラム分けのエリアを作るrowに対してmarginで余白を指定しました」とのことですが、そのマージン指定はご提示のコードではどの部分に当たりますか？　CSSでも属性でも見つけることができませんでした。

inou-

2021/02/06 12:41

お忙しい中、返信ありがとうございます。 780pxより大きい画面サイズでは左側に余白をつけたいと思い、ml-5(下記参照)指定しました。 780pxより小さいサイズでは✓ Lorem ipsum dolor sit amet, consecteturという複数のテキストの表示位置を上の2文と同じくらいの表示位置にしたいと思い、margin-rightを指定しました。余白の指定方法に関してまだまだ勉強不足を痛感しています。この考え方はそもそも間違っているのでしょうか？記述間違いをしていました。すみませんでした。 sumpleというclass名に対してマージン(ml-5)を指定しました。