CSSの左右繰り返しができない

テキストの左右繰り返しができません。
画像のようにservice-backが追加されるごとにservice-text部分を右、左、右、左、、、と左右に繰り返されるようにしたいです。

html
1コード
2<div class="service-back">
3          <div class="inner">
4            <div class="service-img">
5              <div class="service-text-content">
6                <p class="service-text">
7                  service-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-text
8                </p><!-- /.service-text -->
9              </div><!-- /.service-text-content -->
10            </div><!-- /.service-img -->
11          </div><!-- /.inner -->
12        </div><!-- /.service-back -->

scss
1コード
2.service-back {
3  background-image: url(画像);
4  background-size: cover;
5  width: 100%;
6  height: 300px;
7  position: relative;
8}
9.inner {
10  max-width: 1100px;
11  margin: 0 auto;
12}
13.service-img {
14  background-image: url(画像);
15  width: 1100px;
16}
17.service-text-content {
18  width: 50%;
19  background-color: #fff;
20  margin-top: 100px;
21  margin-left: 40%;
22  border: 1px solid #000;
23}

試したこと1

scss
1コード
2div[class*="service-text-content"] {
3  &:nth-of-type(2n) {
4    margin-left: 10%;
5  }
6}

試したこと２

scss
1コード
2.service-img > .service-text-content {
3&:nth-of-type(2n) {
4  margin-left: 10%;
5} 
6}

どちらも全てのservice-text-contentが左に寄ってしまいました。(97303d7be0833509b8b18923f444832b.png)

行動規範の内容に同意します

回答1件

ベストアンサー

こちらでやりたいことは実装できていますか?

HTML
1
2<div class="service-back">
3  <div class="inner">
4    <div class="service-img">
5      <div class="service-text-content">
6        <p class="service-text">
7          service-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-text
8        </p><!-- /.service-text -->
9      </div><!-- /.service-text-content -->
10    </div><!-- /.service-img -->
11  </div><!-- /.inner -->
12</div><!-- /.service-back -->
13
14<div class="service-back">
15  <div class="inner">
16    <div class="service-img">
17      <div class="service-text-content">
18        <p class="service-text">
19          service-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-text
20        </p><!-- /.service-text -->
21      </div><!-- /.service-text-content -->
22    </div><!-- /.service-img -->
23  </div><!-- /.inner -->
24</div><!-- /.service-back -->
25
26<div class="service-back">
27  <div class="inner">
28    <div class="service-img">
29      <div class="service-text-content">
30        <p class="service-text">
31          service-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-text
32        </p><!-- /.service-text -->
33      </div><!-- /.service-text-content -->
34    </div><!-- /.service-img -->
35  </div><!-- /.inner -->
36</div><!-- /.service-back -->
37
38<div class="service-back">
39  <div class="inner">
40    <div class="service-img">
41      <div class="service-text-content">
42        <p class="service-text">
43          service-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-textservice-text
44        </p><!-- /.service-text -->
45      </div><!-- /.service-text-content -->
46    </div><!-- /.service-img -->
47  </div><!-- /.inner -->
48</div><!-- /.service-back -->

CSS
1.service-back {
2  background-image: url(画像);
3  background-size: cover;
4  width: 100%;
5  height: 300px;
6  position: relative;
7}
8.inner {
9  max-width: 1100px;
10  margin: 0 auto;
11}
12.service-img {
13  background-image: url(画像);
14  width: 1100px;
15}
16.service-text-content {
17  width: 50%;
18  background-color: #fff;
19  margin-top: 100px;
20  margin-left: 40%;
21  margin-right: auto; /* 追加 */
22  border: 1px solid #000;
23}
24
25/* 追加 */
26.service-back:nth-child(2n) .service-text-content {
27  margin-left: auto;
28  margin-right: 40%;
29}