画像の中に文字を中央に入力したい

Question

上記の画像の中の文字を中央に入れたいです。
宜しくお願いします。
自分が書いたコードは以下になります。

<div class ="main-visual">
                <h1 class="title1">#</h1>
            </section>
        </div>

.title1{
    .title1{
    font-size: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
    margin:0;
    padding:0;
}

.main-visual{
    overflow: auto;
    width: 100%;
    height: 300px;
    background-image: url(img/Sky_Clouds_Rays_of_light_470197.jpg);
    background-size: cover;
    background-position: center;
}

Answer 1

.title1{
font-size: 4rem;
display: flex;
justify-content: center;
align-items: center;
height:100%;
margin:0;
padding:0;
}

Comments

[yambejp]

sectionについたクラスmain-visual-contentと
cssで指定している.main-visualが違います

[ver33]

ご回答ありがとうございます。
ご回答を受けて訂正しました。
それでも、中央に文字がきませんでした。

[yambejp]

「.title1{
.title1{」
ってなっていますが・・・

[ver33]

お願いしていた質問のコードの下にもいろいろコードを記入していたのですが、整理したら画像の真ん中に文字が来ました。
せっかく、ご回答いただいたのでベストアンサーにさせて頂きます。
ご教示ありがとうございました。