css! important non funziona e modifiche inline-block al blocco [risolto]

Question

Scusa se questo è un post duplicato. Non avevo ancora trovato la risposta in alcuni post simili.

Questo è l'HTML del mio sito web:

.navbar-block{
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

<div id="navbar" style="background-color: #393939; position: relative; top: -8px; left: -8px; width: 100%; height: 37px; border: 8px solid #393939;">
    <div id="logo-container" class="navbar-block">
        <a href="/questions" style="color:rgba(0,0,0,0);">
            <p style="font-size: 25px; color: #B8A184;" class="no-select">JFJudge</p>
        </a>
    </div>
    <div id="navbar-question" class="no-select navbar-block"><p style="font-size: 14px; color: #ffffff; transform: translateY(-1px);">Questions</p></div>
</div>

Tuttavia, gli stili inline-block margin-left margin-rightnon sembrano tutti funzionare. Ho controllato lo stile di visualizzazione dell'elemento utilizzando uno script della console. Sembra che invece abbia lo blockstile.

La soluzione era inserire CSS in linea nell'elemento logo-containere navbar-question.

Sto cercando di risolvere il problema modificando solo il foglio di stile CSS. Ho anche provato:

.navbar-block{
    display: inline-block !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

Ancora non funziona.

Qualcosa che dovrei provare adesso? Grazie.

Nota: sto usando Django localhost per testare l'HTML e il foglio di stile viene inserito nella cartella statica.

Answer 1

Probabilmente c'è un'altra riga che sovrascrive la tua riga importante. Quello che faccio sempre in questi casi è: apri la pagina in Firefox, fai clic destro sull'elemento interessato e fai clic su "investigate" per aprire lo strumento di sviluppo, quindi normalmente la tua riga CSS sovrascritta avrà un filtro visualizzato accanto ad essa. fai clic su quell'icona e ti mostrerà esattamente quale riga CSS sovrascrive quella esistente.