the text decoration wont work? in html/css

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><a href="www.youtube.com" class="life"><strong>MY LIFE</strong></a>
  </li>
  <li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a>
  </li>
  <li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a>
  </li>
  <li><a href="www.youtube.com" class="me"><strong>ABOUT ME</strong></a>
  </li>
</ul>

Answer 1

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><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a></li>
    <li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a></li>
    <li><a href="www.youtube.com" class="me"><strong>ABOUT ME</strong></a></li>
  </ul>
</div>

Answer 2

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><a href="www.youtube.com" class="life"><strong>MY LIFE</strong></a>
  </li>
  <li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a>
  </li>
  <li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a>
  </li>
  <li><a href="www.youtube.com" class="me"><strong>ABOUT ME</strong></a>
  </li>
</ul>

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;
 }