How can I force text to "normal" (not bold) using css?

Issue

I have a class that I'm using to make some text navy and large:

.sectiontext {
    color: navy !important;
    font-size: large;
}

I apply it to elements like so:

<label class="sectiontext">Select a Unit</label>
. . .
<h4 class="sectiontext">Specify Recipients</h4>

The problem is that when I apply it to a label, it makes that text bold. I tried adding the following line to the sectiontext class:

font-weight: normal !important;

...but it makes no difference; I don't want to use "h4" instead of "label" for some bits of text because h4 always contains a "line break"; I wnat to be able to use this text style prior to a "select" element and several checkboxes, too, and thus not have the text "break"

But even with the "!important" added to the sectiontext class, the text remains bold. For example, compare the "Select a Unit" and "Select Report[s]" labels here with the H4 "Specify Recipients" and "Generate and Email Report" text:

What can I do to have a label that is not bold?

UPDATE

The only custom CSS I have is:

body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: lightyellow;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.containerforplatypus {
    border: 2px solid #ccc;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-bottom: 8px;
    padding: 6px;
}

.margin4horizontal {
    margin-left: 4px;
    margin-right: 4px;
}

.fancyorangetext {
    text-shadow: 0 0 6px orange !important;
    font-size: xx-large;
}

.leftmargin8 {
    margin-left: 8px !important;
}

.sectiontext {
    color: navy !important;
    font-size: large;
    font-weight: normal !important;
}

...otherwise, it's just these bootstrap classes that are being used:

jumbotron
row
col-md-6
col-md-12
control-label
form-control
h3
h4
btn btn-primary
btn btn-sm

The entire HTML for those two problematic labels (in context) is:

<div class="row">
    <div class="col-md-12" name="unitsCheckboxDiv">
        <label class="sectiontext">Select a Unit</label>
        <select class="form-control, dropdown">
            @foreach (var field in units)
            {
                <option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
            }
        </select>
    </div>
</div>

<div class="row">
    <div class="col-md-12" name="unitsCheckboxDiv">
        <div class="containerforplatypus">
            <label class="sectiontext">Select Report[s]</label>
            @foreach (var rpt in reports)
            {
                <input class="leftmargin8" id="ckbx_@(rpt.report)" type="checkbox" value="@rpt.report" />@rpt.report
            }
        </div>
    </div>
</div>

UPDATE 2

It works now, with no change; it first worked on trying fmz's suggestion, but then I tried my previous approach again, and it now works, and even without the "!important" marker:

.sectiontext {
    color: navy !important;
    font-size: large;
    /*font-weight: 400 !important; <= works */
    /*font-weight: normal !important; <= works now, as does the rule below */
    font-weight: normal;
}

Solution

Consider using:

label {font-weight: 400 !important}

Also specify the font-size, as your label appears to be displaying a larger than normal font size.

Answered By - forrest