Was sind die besten Tools/Prozesse für Webdesign-Verfeinerungen/Polituren? [geschlossen]

Ich arbeite gerade an einem bestimmten Teil einer Webseite und habe ein Modelldesign, mit dem ich arbeiten kann. Ich war immer in der Lage, alles in HTML zu blockieren und ungefähr so ​​auszusehen, wie ich es in CSS mag, kein Problem. Wenn ich in die letzten Züge komme, habe ich das Gefühl, dass ich ständig gegen CSS kämpfe, um das Aussehen zu erreichen, das ich anstrebe (nicht einmal das Ziel, pixelgenau oder so etwas zu erreichen, ich weiß, das ist eine ganz andere Diskussion). Nur herauszufinden, wie man einen Text einfach so bewegt und die Wörter so platziert, wie ich möchte, und Größe und Abstand erhält, wie ich möchte, nimmt so viel Zeit in Anspruch. Besonders dieses Projekt treibt mich in den Wahnsinn, weil es die anderen Dinge, die ich gemacht habe, durcheinander bringt, wenn ich eine Sache richtig aussehen lasse.

Meine Fragen sind folgende: Gibt es einen besseren Weg als Versuch und Irrtum in den Entwicklertools eines Browsers, um dieses Zeug herauszufinden? Gibt es eine Ressource für CSS auf hohem Niveau "Sie wollen X tun? Verwenden Sie die Y-Technik", die kein werbegetriebener Blog-Spam von "17 erstaunlichen Wegen zu X" ist? Gibt es dafür bessere Tools als Browser-Entwicklungstools? Oder ist dieser Kampf nur „so wie er ist“ und es gibt nichts Besseres, als stundenlang herumzutüfteln?

Mockup, mein Versuch und die relevantesten HTML + CSS-Snippets sind unten

Attrappe, Lehrmodell, Simulation:

Mein Versuch in 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;
}