Target span

[djjunior]

salve, cerco di spiegarmi sperando in modo chiaro.
Ho una pagina web con una parte alta a 50px dall'inizio dal top pagina.
Poi all'interno quindi nella parte bassa ho una pagina con 4 capitoli interni raggiungibili da un menù tipo :
<a href="#capitolo1">CAP1</a>
<a href="#capitolo2">CAP2</a>
Ad ogni inizio capitolo naturalmente ho messo:
<span id"capitolo1">CAPITOLO1</span>
<span id"capitolo2">CAPITOLO2</span>
Solo che cliccando per esempio sul capitolo 2 e i successivi l'inizio del capitolo va sotto la parte top alta , invece di iniziare dopo i 50px.
Ho provato ad inserire

span:target{
top: 50px;
}

Ma niente, come posso ovviare, potete suggerirmi un alternativa che funzioni sul mobile?
Grazie

[KillerWorm]

ciao, una soluzione può essere l'applicazione di scroll-padding-top
in questo modo:

html, body {
    scroll-padding-top: 50px;
}