the text decoration wont work? in html/css - html

Question

ok so i put a background and blocks in lists but now the text is hyperlinked and only the text is clickable. what am i doing wring? i need the whole box to be clickable and the text the be white until you scroll over it then it turns black. also, is there a way to make it on mobile that the boxes are closer together under each other?
body {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color: #3D5771;
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 23%;
left: 30%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 250px;
top: -1px;
left: 15px;
height: 25px;
font-family: Arial;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
<center>
<h1>A Girl With A Passion</h1>
</center>
<ul>
<li><strong>MY LIFE</strong>
</li>
<li><strong>PORTFOLIO</strong>
</li>
<li><strong>RESUME</strong>
</li>
<li><strong>ABOUT ME</strong>
</li>
</ul>

Answer 1

The text decoration is done on the anchor element I think, not the <li> tag.
Have you tried this?
ul li a,
ul li a {
text-decoration: none;
}
Full CSS/HTML:
body {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color: #3D5771;
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 23%;
left: 30%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 250px;
top: -1px;
left: 15px;
height: 25px;
font-family: Arial;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li:hover a,
ul li a:active {
background-color: white;
color: black;
}
ul li a {
color: white;
text-decoration: none;
height: 100%;
width: 100%;
display: inline-block;
}
<center>
<h1>A Girl With A Passion</h1>
</center>
<ul>
<li><strong>MY LIFE</strong>
</li>
<li><strong>PORTFOLIO</strong>
</li>
<li><strong>RESUME</strong>
</li>
<li><strong>ABOUT ME</strong>
</li>
</ul>

Answer 2

Add this to your CSS to make the whole "box" clickable
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
And change this to get color right
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
Update: Base on your request, I made some markup changes, to make it more responsive
Snippet demo
html, body {
margin: 0;
padding:0;
}
body {
background:URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color:#3D5771;
}
.wrapper {
padding-top: 10%;
}
h1 {
color: white;
font-family:Arial;
font-size: 4.6vw;
letter-spacing: 1px;
text-align: center;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
text-align: center;
margin: 0;
padding: 0;
}
ul li {
font-family:Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
background-color: rgba(5,4,2,0.1);
border: 2px solid white;
color: white;
font-size: 90%;
width: 150px;
height: 40px;
margin: 30px;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
text-decoration: none;
color: white;
}
#media screen and (max-width: 700px) {
.wrapper {
padding-top: 5%;
}
ul li {
margin: 10px;
}
}
<div class="wrapper">
<h1>A Girl With A Passion</h1>
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>

Answer 3

that is because you haven't used text-decoration property for your a.to do that in your css use,
li a{
text-decoration:none;
}
instead of this.
li{
text-decoration:none;
}