If you test out this code and resized the browser window, the last list-item "sign up" when hovered (is the only way to tell) that it doesn't stretch 100%. I've tried many different ways. If someone can test it out and find a solution; please explain how you fixed it that way I can learn. Please.
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: rgba(182, 182, 182, 1);
}
div.main_container {
position: fixed;
height: 100%;
width: 100%;
background-image: url("../images/IMG_0060.JPG");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
div.nav_container {
position: fixed;
z-index: 1;
height: 50px;
width: 100%;
min-width: 700px;
background-color: rgba(34, 34, 34, .75);
}
ul.nav {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 100%;
width: 100%;
}
ul.nav li {
background-color: transparent;
display: table;
float: left;
height: 50px;
width: 12.5%;
text-align: center;
}
ul.nav li marquee {
position: relative;
display: table-cell;
vertical-align: middle;
color: white;
font-weight: bold;
font-family: fantasy;
}
ul.nav li a {
text-decoration: none;
text-transform: capitalize;
font-family: fantasy;
position: relative;
display: table-cell;
vertical-align: middle;
color: lightgray;
font-weight: bold;
}
ul.nav li:hover {
background-color: rgba(205, 205, 205, .50);
}
ul.nav li:hover marquee {
background-color: black;
color: lightgreen;
}
ul.nav li:hover a {
color: black;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Kendall's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="main_container">
<div class="nav_container">
<ul class="nav">
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">kendall</a>
</li>
<li>
<a href="#">projects</a>
</li>
<li>
<a href="#">social</a>
</li>
<li>
<a href="#">tutorials</a>
</li>
<li>
<marquee scrollamount="2">
some sliding text
</marquee>
</li>
<li>
<a href="#">login</a>
</li>
<li>
<a href="#">sign up</a>
</li>
</ul>
<!--Closing of the nav-->
</div>
<!--Closing of the nav_container-->
</div>
<!--Closing of the main_container-->
</body>
</html>You can change the last-child of ul.nav li to float:right
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: rgba(182, 182, 182, 1);
}
div.main_container {
position: fixed;
height: 100%;
width: 100%;
background-image: url("../images/IMG_0060.JPG");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
div.nav_container {
position: fixed;
z-index: 1;
height: 50px;
width: 100%;
min-width: 700px;
background-color: rgba(34, 34, 34, .75);
}
ul.nav {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 100%;
width: 100%;
}
ul.nav li {
background-color: transparent;
display: table;
float: left;
height: 50px;
width: 12.5%;
text-align: center;
}
ul.nav li:last-child {
float:right;
}
ul.nav li marquee {
position: relative;
display: table-cell;
vertical-align: middle;
color: white;
font-weight: bold;
font-family: fantasy;
}
ul.nav li a {
text-decoration: none;
text-transform: capitalize;
font-family: fantasy;
position: relative;
display: table-cell;
vertical-align: middle;
color: lightgray;
font-weight: bold;
}
ul.nav li:hover {
background-color: rgba(205, 205, 205, .50);
}
ul.nav li:hover marquee {
background-color: black;
color: lightgreen;
}
ul.nav li:hover a {
color: black;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Kendall's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="main_container">
<div class="nav_container">
<ul class="nav">
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">kendall</a>
</li>
<li>
<a href="#">projects</a>
</li>
<li>
<a href="#">social</a>
</li>
<li>
<a href="#">tutorials</a>
</li>
<li>
<marquee scrollamount="2">
some sliding text
</marquee>
</li>
<li>
<a href="#">login</a>
</li>
<li>
<a href="#">sign up</a>
</li>
</ul>
<!--Closing of the nav-->
</div>
<!--Closing of the nav_container-->
</div>
<!--Closing of the main_container-->
</body>
</html>