How to make <hr> same width as the horizontal menu? - css

Question

I'm trying to style the menu with to have the horizontal line above it the same width, like on this Blue Note website. I can't seem to get it to scale right, I found this question is similar but it did not help me. I've tried a bunch of things and could really appreciate some help, I'm using WordPress with the Blaskan theme. Here is the Fiddle and the related HTML and CSS:
<nav id="NAV_1">
<button id="BUTTON_2">
Menu
</button>
<div id="DIV_3">
<h6 id="H6_4">
READING JAZZ - LISTENING TO LITERATURE
</h6><hr id="HR_5" />
</div>
<div id="DIV_6">
<ul id="UL_7">
<li id="LI_8">
News
</li>
<li id="LI_10">
Home
</li>
<li id="LI_12">
About
</li>
<li id="LI_14">
Contact
</li>
<li id="LI_16">
Jazz
</li>
<li id="LI_18">
Literature
</li>
<li id="LI_20">
Test
</li>
<li id="LI_22">
New
</li>
</ul>
</div>
#NAV_1 {
box-sizing: border-box;
color: rgb(137, 137, 137);
height: 227.538px;
overflow-wrap: break-word;
text-align: justify;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 750px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 375px 113.762px;
transform-origin: 375px 113.762px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
margin: 0px 101.8px;
outline: rgb(137, 137, 137) none 0px;
padding: 0px 15px;
}/*#NAV_1*/
#NAV_1:after {
box-sizing: border-box;
clear: both;
color: rgb(137, 137, 137);
content: '"' '"';
display: table;
height: 0px;
overflow-wrap: break-word;
text-align: justify;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 0px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
outline: rgb(137, 137, 137) none 0px;
}/*#NAV_1:after*/
#NAV_1:before {
box-sizing: border-box;
color: rgb(137, 137, 137);
content: '"' '"';
display: table;
height: 0px;
overflow-wrap: break-word;
text-align: justify;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 0px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
outline: rgb(137, 137, 137) none 0px;
}/*#NAV_1:before*/
#BUTTON_2 {
color: rgba(0, 0, 0, 0.8);
cursor: pointer;
display: none;
height: auto;
overflow-wrap: break-word;
text-decoration: none solid rgba(0, 0, 0, 0.8);
text-size-adjust: 100%;
width: auto;
word-wrap: break-word;
column-rule-color: rgba(0, 0, 0, 0.8);
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
caret-color: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.8);
font: normal normal 400 normal 20px / 20px "Source Sans Pro", sans-serif;
margin: 0px auto;
outline: rgba(0, 0, 0, 0.8) none 0px;
padding: 20px 0px;
}/*#BUTTON_2*/
#BUTTON_2:after {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.8);
content: '""';
cursor: pointer;
overflow-wrap: break-word;
text-decoration: none solid rgba(0, 0, 0, 0.8);
text-size-adjust: 100%;
word-wrap: break-word;
column-rule-color: rgba(0, 0, 0, 0.8);
caret-color: rgba(0, 0, 0, 0.8);
border: 0px none rgba(0, 0, 0, 0.8);
font: normal normal 400 normal 20px / 20px FontAwesome;
outline: rgba(0, 0, 0, 0.8) none 0px;
padding: 0px 0px 0px 20px;
}/*#BUTTON_2:after*/
#DIV_3 {
box-sizing: border-box;
color: rgb(137, 137, 137);
height: 28.4px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 360px 14.2px;
transform-origin: 360px 14.2px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
outline: rgb(137, 137, 137) none 0px;
}/*#DIV_3*/
#H6_4 {
box-sizing: border-box;
clear: both;
color: rgb(51, 51, 51);
height: 22.4px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 360px 11.2px;
transform-origin: 360px 11.2px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / 22.5px "Droid Serif", serif;
margin: 41.94px 0px -4px;
outline: rgb(51, 51, 51) none 0px;
}/*#H6_4*/
#HR_5 {
color: rgb(137, 137, 137);
height: 3px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 279.2px 0.5px;
transform-origin: 279.2px 0.5px;
caret-color: rgb(137, 137, 137);
background: rgb(25, 23, 98) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(0, 0, 0);
font: normal normal 400 normal 13px / 16.003px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 7px 0px 16px;
outline: rgb(137, 137, 137) none 0px;
}/*#HR_5*/
#DIV_6 {
box-sizing: border-box;
color: rgb(137, 137, 137);
height: 171.2px;
overflow-wrap: break-word;
text-align: justify;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 360px 85.6px;
transform-origin: 360px 85.6px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
margin: -30px 0px 0px;
outline: rgb(137, 137, 137) none 0px;
}/*#DIV_6*/
#UL_7 {
box-sizing: border-box;
color: rgb(25, 23, 98);
height: 171.2px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 360px 85.6px;
transform-origin: 360px 85.6px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
margin: 0px;
outline: rgb(25, 23, 98) none 0px;
padding: 0px;
}/*#UL_7*/
#LI_8, #LI_10 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 87px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 43.5px 42.8px;
transform-origin: 43.5px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_8, #LI_10*/
#A_9, #A_11 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 42px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 21px 42.8px;
transform-origin: 21px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_9, #A_11*/
#LI_12 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 93.2375px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 46.6125px 42.8px;
transform-origin: 46.6125px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_12*/
#A_13 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 48.2375px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 24.1125px 42.8px;
transform-origin: 24.1125px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_13*/
#LI_14 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 111.625px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 55.8125px 42.8px;
transform-origin: 55.8125px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_14*/
#A_15 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 66.625px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 33.3125px 42.8px;
transform-origin: 33.3125px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_15*/
#LI_16 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 78.45px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 39.225px 42.8px;
transform-origin: 39.225px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_16*/
#A_17 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 33.45px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 16.725px 42.8px;
transform-origin: 16.725px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_17*/
#LI_18 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 131.087px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 65.5375px 42.8px;
transform-origin: 65.5375px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_18*/
#A_19 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 86.0875px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 43.0375px 42.8px;
transform-origin: 43.0375px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_19*/
#LI_20 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 80.7875px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 40.3875px 42.8px;
transform-origin: 40.3875px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_20*/
#A_21 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 35.7875px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 17.8875px 42.8px;
transform-origin: 17.8875px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_21*/
#LI_22 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 32.6625px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 16.325px 42.8px;
transform-origin: 16.325px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
}/*#LI_22*/
#A_23 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 32.6625px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 16.325px 42.8px;
transform-origin: 16.325px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_23*/

Answer 1

Instead of using HR element, add a border-top CSS property to your menu
(either on LI element like example below, or on UL element)
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
border-top: 2px solid red;
float: left;
padding: 10px 5px;
background:#eee;
}
<div>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
</ul>
</div>