¿Cuáles son las mejores herramientas/procesos para refinar el diseño web/agregar brillo? [cerrado]

Estoy trabajando en una parte particular de una página web en este momento y tengo un diseño simulado para trabajar. Siempre he podido bloquear todo en HTML y mirar aproximadamente como me gusta en CSS sin problemas. Es cuando llego a los tramos finales que siento que estoy luchando constantemente con CSS para lograr el aspecto que busco (sin siquiera apuntar a un píxel perfecto ni nada por el estilo, sé que es una discusión completamente diferente). Solo averiguar cómo mover un texto y espaciar las palabras como quiero y obtener el tamaño y el espaciado como quiero está tomando mucho tiempo. Este proyecto en particular me está volviendo loco porque hacer que una cosa se vea bien estropea las otras cosas que he hecho.

Mis preguntas son estas: ¿Hay una mejor manera que prueba y error en las herramientas de desarrollo de un navegador para resolver esto? ¿Existe un recurso para CSS de alto nivel "¿Quieres hacer X? Usa la técnica Y" que no sea un blog-spam repleto de anuncios de "17 maneras asombrosas de X"? ¿Hay mejores herramientas para esto más allá de las herramientas de desarrollo del navegador? ¿O es esta lucha simplemente "cómo es" y no hay nada mejor que jugar durante horas?

La maqueta, mi intento y los fragmentos de HTML + CSS más relevantes se encuentran a continuación

Bosquejo:

Mi intento en HTML+CSS:

HTML:

<div id="result-message">
    <p class="content">
        <span class="message-row outer before-cost">a used home costs</span>
        <span class="message-row cost">
            <span class="monthly-cost-delta"><!-- Dynamic content --></span>
            <span class="over-under">
                <span class="over-line">MORE</span>
                <span class="under-line">PER MONTH</span>
            </span>
        </span>
        <span class="message-row outer after-cost">to own than a new home</span>
    </p>
</div>

CSS:

#result-message {
    float: left;
    position: relative;
    top: 28.7rem;
    left: 25rem;
    margin: 0;
    padding: 1rem 2rem;
    height: auto;


    background: white;
    border: 6px solid #ECC246;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: 900;
}

#result-message .content {
    /* margin-top: -1rem; */
    color: #DB9F32;
    font-size: 29px;
    font-weight: 700;
    text-align: center;
    /* text-shadow: 2px 2px #2EAA60; */
}

#result-message .content .message-row {
    width: 272px;
}

#result-message .content .before-cost {
    margin-top: -2rem;
    margin-bottom: -4rem;
}

#result-message .content .after-cost {
    margin-bottom: -7rem;
    position: relative;
    top: -2rem;
}

#result-message .content .outer.message-row .textFitted {
    text-align: justify !important;
    width: 100%;
}

#result-message .content .outer.message-row {
    display: block;
    height: 50px;
    text-align: justify;
    clear: both;
}

/* For single line justify as described at https://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/ */
#result-message .content .outer.message-row:after {
    content: "";
    display: inline-block;
    width: 100%;
}

#result-message .content .cost {
    display: block;
    color: #347341;
    clear: both;
}

#result-message .content .cost .monthly-cost-delta {
    float: left;
    font-size: 80px;
    line-height: 94px;
}

#result-message .content .cost .over-under {
    display: block;
}

#result-message .content .cost .over-under .over-line {
    font-size: 40px;
    display: block;
    float: right;
    text-align: center;
}

#result-message .content .cost .over-under .under-line {
    font-size: 20px;
    border-top: 3px solid #347341;
    display: block;
    float: right;
}