テキストにtext-alignが効かない

テキストにtext-alignが効きません。
どなたかご回答いただければ幸いです。

コードは以下の通りです。

html
1  <!-- footer -->
2  <footer>
3    <div class="footer-inner">
4      <div class="footer-left">
5        <a href=""><i class="fab fa-twitter"></i></a>
6        <a href=""><i class="fab fa-facebook-square"></i></a>
7        <ul>
8          <li><a href="">サイトマップ</a></li>
9          <li><a href="">個人情報保護方針</a></li>
10          <li><a href="">プライバシーポリシー</a></li>
11        </ul>
12      </div>
13      <div class="footer-right">
14        <h3>HANIWAMAN Corp.</h3>
15        <small>&copy; Haniwaman Landing page Sample.</small><!-- ここです -->
16      </div>
17    </div>
18  </footer>
19

scss
1// footer
2footer {
3  background-color: #3e3e3e;
4  padding: 110px 40px 70px;
5  .footer-inner {
6    width: 100%;
7    max-width: 1180px;
8    margin: 0 auto;
9    display: flex;
10    justify-content: space-between; 
11    align-items: center;
12    .footer-left {
13      > a {
14        font-size: 4rem;
15        color: #c3c3c3;
16        transition: 0.1s;
17        &:first-of-type {
18          margin-right: 15px;
19        }
20        &:hover {
21          color: #fff;
22        }
23      }
24      ul {
25        margin-top: 30px;
26        li {
27          margin-bottom: 20px;
28          &:last-of-type {
29            margin-bottom: 0;
30          }
31          a {
32            font-size: 1.8rem;
33            color: white;  
34          }
35        }
36      }
37    }
38    .footer-right {
39      color: white;
40      h3 {
41        font-size: 4.4rem;
42      }
43      small {
44        font-size: 1.2rem;
45        text-align: right; //ここです。
46        color: #c3c3c3;
47      }
48    }
49  }
50}
51

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

回答2件

ベストアンサー

タグはinline要素です。
inline要素にはtext-alignは直接は指定できません。
下記のようにするとうまく動くと思います。

html
1      <div class="footer-right">
2        <h3>HANIWAMAN Corp.</h3>
3        <div class="footer-copyright"><small>&copy; Haniwaman Landing page Sample.</small></div><!-- divで囲みます。 -->
4      </div>

SCSS
1    .footer-right {
2      color: white;
3      h3 {
4        font-size: 4.4rem;
5      }
6      .footer-copyright {
7        text-align: right; //こちらに移動
8      }
9      small {
10        font-size: 1.2rem;
11        color: #c3c3c3;
12      }
13    }