The bottom border is starting from the left of the page however, I want the border to start from &qu-CodePudding

The bottom border is starting from the extreme left of the page. I would like the same to start from "T" of Tech.

#page-container {
  width: 1250px;
  margin: 0 auto;
}

h2 {
  font-weight: normal;
  padding-left: 15px;
  font-size: 22px;
  margin-top: 5px;
  float: left;
  border-bottom: 3px #b80000 solid;
  width: 55px;
}

<div >
  <div id="main-article">
    <h2>Tech</h2>
  </div>
</div>

CodePudding user response：

Just apply padding-right instead - or, you could scrap the padding-altogether. Also, remove the fixed width of the <h2>-element.

If you want to align the bottom border differently, you could create a pseudo-element and fix the alignment. This will only make a few pixels difference, though.

.page-container {
  width: 1250px;
  margin: 0 auto;
}

.page-container h2 {
  font-weight: normal;
  padding-right: 15px;
  font-size: 22px;
  margin-top: 5px;
  text-align: left;
  float: left;
  border-bottom: 3px #b80000 solid;
  /*width: 55px;*/
}

.page-container-two h2 {
  position: relative;
  /* max-width: fit-content makes sure the h2s width is relative to its content */
  max-width: fit-content;
  font-weight: normal;
  font-size: 22px;
}

.page-container-two h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 3px;
  /* this calculation is making sure the border is 100% width with just a few pixels off. */
  /* this amount of pixels can be used on the left value to align it properly */
  width: calc(100% - 3px);
  height: 3px;
  background-color: #b80000;
}

<div >
  <div id="main-article">
    <h2>Tech</h2>
  </div>
</div>
<br><br>
<div >
  <div id="main-article">
    <h2>Tech</h2>
  </div>
</div>

CodePudding user response：

I think this would be the "best practice" approach for what you are going for:

#page-container {
  width: 1250px;
  margin: 0 auto;
}

h2 {
  position: relative;
  font-weight: normal;
  width: 55px;
  font-size: 22px;
  margin-top: 5px;
}

h2::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 3px;
  background-color: red;
}

<div >
  <div id="main-article">
    <h2>Tech</h2>
  </div>
</div>

CodePudding user response：

You have given the h2 padding-left. The border takes that into account.

The simplest change is to remove the left side padding and replace it with a margin.

#page-container {
  width: 1250px;
  margin: 0 auto;
}

h2 {
  font-weight: normal;
  margin-left: 15px;
  font-size: 22px;
  margin-top: 5px;
  float: left;
  border-bottom: 3px #b80000 solid;
  width: 55px;
}

<div >
  <div id="main-article">
    <h2>Tech</h2>
  </div>
</div>