margin-left is getting duplicated/multiplied

Question

I really can't get why, somehow margin-left is just affecting other elements, which is very annoying.

.setting-container {
  position: relative;
  top: 60px;
  left: 0px;
  width: 100%;
  height: calc(100% - 60px);
}
.setting-topnav {
  width: 100%;
  height: 40px;
  left: 0px;
  background-color: #081723;
}

.setting-topnav a {
  font-size: 12px;
  font-family: NanumGothic;
  color: #fafafa;

  vertical-align: middle;
  line-height: 40px;
  margin-left: 43px;
  text-decoration: none;
}

.setting-title {
  width: 100%;
  height: 40px;
  left: 0px;
}

.setting-title a {
  font-size: 28px;
  font-family: NanumGothic;
  color: #fafafa;

  vertical-align: middle;
  line-height: 40px;
  margin-left: 43px;
  text-decoration: none;
}

<div id="navbar_template"></div> 
<div class="setting-container">
    <div class="setting-topnav">
        <a>Setting　/　Basic Configuration<a>
    </div>

    <div class="setting-title">
        <a>Basic Configuration<a>
    </div>
</div> 

Answer 1

Close your a tags:

<div id="navbar_template"></div> 
<div class="setting-container">
    <div class="setting-topnav">
        <a>Setting　/　Basic Configuration</a>
    </div>

    <div class="setting-title">
        <a>Basic Configuration</a>
    </div>
</div>