Como deixar o texto adaptável em uma site com efeito scroll

Front-end
#1

Meu site é scroll, estou com problemas pra deixar o texto adaptável ao width, o texto não está quebrando automático e está criando uma barra de rolagem no rodapé.
O estilo do texto está na classe “Sobre”

`*{
margin: 0;
padding: 0;
}

body, html{
max-width: 100%;
height: 100%;
}

#menu{
width: 100%;
height: 102px;
background-color: #000;
color: #fff;
position: fixed;
display: flex;

}

#menu a{
display: block;
color: #fff;
text-decoration: none;
padding: 48px;
flex-grow: 1;
font-family: Arial;
}

#menu a:hover{
padding: 48px;
background: #fff;
color: #000;
}

.logo{
display: block;
}
.content{
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

p{
text-indent: 50px;
text-align: center;
}

#home{ background-color: #000;}
#sobre{ background-color: #fff; width: 100%;}

.sobre{
text-align: center;
padding: 30px;
overflow: visible;
}`