Changing the style of leftmost menu item - html

Question

Here is my Codepen demo which I want to show like image snap below the link:
Codepen Demo
Snap:
I used this css:
.menu > ul > li:first-child {
color: red !important;
}
To make left most link Red but still it shows Grey line.
Actually it should look like this:
Problem 2:
The length of the line above alert box should span to entire width of the page. How to do this?
I tried with chaging:
.menu > ul {
display: block;
list-style: none;
border-bottom: 0.1em solid #9e9e9e;
width: 152%; // makig it 200% increase width of entire page. Rather I want to increase the width of lie only
margin-left: -2%;
}

Answer 1

Try this
.menu > ul > li:first-child a {
color: red !important;
}
DEMO

Answer 2

Your code is fine, the only issue is that the a is getting overrid by the color from actual properties for the hyperlink as
a {
// properties..
}
Change the code to this:
.menu > ul > li:first-child a {
color: red !important;
}
Which will apply the settings to the hyperlink of the left most list item under the un ordered list in the element with class menu! :)

Answer 3

You forgot to add anchor selector at the end of:
.menu > ul > li:first-child a {
color: red !important;
}