Extend length of border css

Use padding and negative margins.

E.g.:

div {
  padding: 1em;
  margin: 0 -1em;
  border-bottom: 1px solid red;
}

The above gives padding on all sides, and negative 1em margin on left and right. You may wish to fiddle w/ that.

CSS borders are placed between the margins and padding of an HTML element. If you want the borders of an HTML element to extend past the width (or height) of that element, you can add CSS padding to the element in order to push the borders outward.

For example, if your html is <li class=vendors">VENDORS</li> adding padding:0 10px; to your CSS would push the borders outwards on the right and left by 10px.