Q:

Elements in wrong DIV when inspecting element

As you can see from the code below, the h4 and hr tag are supposed to be part of .settings_title but when inspecting .options, it highlights that the h4 and hr tag are part it (see image).
When putting margin/padding to the "options" div, it puts the margin/padding above the h4 and hr tag, when it suppose to be above the paragraph tag.

HTML:
                        <div class="settings_timer">
                            <div class="settings_title">
                                <h4>TIMER</h4>
                                <div>
                                    <hr>
                                </div>
                            </div>

                            <div class="options">
                                <p>Test</p>
                            </div>
                        </div>

CSS:
.settings h4 {
font-family: "Rubik", sans-serif;
font-size: 22px;
color: #36A2B0;
float: left;
margin-right: 15px;
}

.settings hr {
    color: #C4C4C4;
    float: left;
    width: 80%;
}

.settings .options {
    float: none;
}

A:

It is because of float: left.
Try display: inline-block instead or .settings_title {  overflow: hidden  }.
There is always the .clearfix, but that might be a little more complicated. Here's more information:

All about Floats - CSS Tricks
What is a clearfix? - StackOverflow

.settings_title {  overflow: hidden;  }

.settings h4 {
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  color: #36A2B0;
  float: left;
  margin-right: 15px;
}

.settings hr {
  color: #C4C4C4;
  float: left;
  width: 80%;
}

.settings .options {
  float: none;
}
<div class="settings">
  <div class="settings_timer">
    <div class="settings_title">
      <h4>TIMER</h4>
      <div>
        <hr>
      </div>
    </div>

    <div class="options">
      <p>Test</p>
    </div>
  </div>
  <div>

