Search code examples
htmlcssheadermarginnav

Border bottom and the header move together

In my nav, I am separating my section with some text and a horizontal line. For each section this repeats. I am doing this as shown below:

.navSectionHeader {
  font-size: 1em;
  color: #fff;
  margin-left: 5px;
  margin-bottom: 10px;
  font-family: "Roboto";
  font-weight: 700 !important;
  border-bottom: 2px solid #6c6c6c;
}

/*.navSectionHeader::after {
    content: ' ';
    display: block;
    border: 2px solid;
    border-color: #6c6c6c;
    margin-left: 0px !important;
}*/

The issue is, my text is now pretty much stuck to the left of the parent div. It should be with some margin to the left while keeping the bottom border start from 0px to the left. When I try to move it with margin-left: 5px; it ends up moving the border-bottom as well. I tried this with ::after as shown in the commented bit, adding !important to the end but nothing changes. Am I doing this the wrong way? Sorry, I'm a front-end noob!

Edit: The section header is in a <span> if it makes a difference.

Without margin

With margin

Solution

  • Use padding instead of margin.

    .navSectionHeader {
   padding-left: 5px;
}

    An example to see difference,

    div {
   display: inline-block;
   width: 100px;
   height: 20px;
   border-bottom: 1px solid black;
   background: red;
   color: white;
}

.padding { 
   padding-left: 5px;
}

.margin { 
   margin-left: 5px;
}
    <div class="margin">margin</div><br>
<div class="padding">padding</div>