How to get underline animation to only take up width of link? - html

Question

Right now on hover the underline animation I've set up for my .nav extends past the link, and I want to make it so it only takes up the width of the link. The width is set to 100%, so I'm not quite sure why it's doing that. Also tried messing around with padding to see if that was the issue but didn't work. Could it be because of bootstrap?
html, body {
font-family:;
margin:0 auto;
text-transform: lowercase;
font-family: Roboto;
letter-spacing: 0.5px;
}
.nav {
float: right;
display: inline-block;
margin:0 auto;
list-style: none;
}
.nav li {
display: inline-block;
margin:0 auto;
list-style: none;
list-style: none;
display: inline;
padding-top:0;
padding-left: 10px;
}
.nav > li > a {
padding: 10px;
color: white;
font-family: Roboto;
text-decoration: none;
position: relative;
width:100%;
}
.nav > li > a:hover {
background-color:transparent;
text-decoration: none;
}
.nav > li > a:focus {
background-color:transparent;
text-decoration: none;
}
.nav > li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color:white;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav > li > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
width:100%;
}
.work h1 {
border-left: 0px solid black;
padding-top:30px;
display:inline-block;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
color:;
}
.work a {
color: black;
text-decoration: none;
}
.supporting .container-fluid {
background-image: url("img/photo-top.jpg");
height: 600px;
background-size: cover;
background-position: center center;
text-align: center;
position:relative;
top: 0;
width: ;
height: 100vh;
}
.work .container-fluid {
height:500px;
margin: 0 auto;
background: white);
width:100%;
padding:0;
}
.photography .container-fluid {
height:500px;
margin: 0 auto;
background: white);
width:100%;
padding:0;
}
.photography a {
border-left: 0px solid black;
padding:10px;
display:inline-block;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
color:black;
}
div.container-fluid {
padding:0;
width:100%;
height: 100%;
}
.info {
position: absolute;
top: 50%;
left: calc(50% - 180px);
width: 360px;
}
.info h1 {
margin:0 auto;
color:white;
font-size: 50px;
}
.info a {
color: white;
}
.info a:hover {
color: white;
background-color:transparent;
text-decoration: none;
}
}