Whenever I change pages, the border-right element shifts right or left depending on the page. It is hard to demonstrate since I can only add one HTML file but can anyone please tell me what I'm doing wrong? The nav ul{ } elements are the same in every HTML file by the way.
oof its telling me I have too much code and that I need more textoof its telling me I have too much code and that I need more text
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: #b3d8f5;
}
nav ul {
font-family: 'Source Sans Pro', sans-serif;
font-size: 110%;
list-style-type: none;
background-color: #4063ff;
border: 4px solid #111111;
border-radius: 20px;
font-weight: bold;
padding: 12px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
table {
font-size: 70%;
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000000;
padding: 8px;
text-align: left;
}
th {
background-color: #61ffc9;
}
td {
background-color: #9effd7;
}
nav li.selected {
color: #020091;
text-decoration: none;
}
a:hover {
color: #2b2b2b;
}
a:active {
color: #05ff43;
}
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website!</title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
</style>
<script data-ad-client="ca-pub-6279648748308214" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<link type="text/css", rel="stylesheet", href="index-stylesheet.css"/>
<nav>
<ul>
<li class="selected">Home</li>
<li><a href=thingy2.html>A cool video</a> </li>
<li><a href=thingy3.html>A cool picture</a></li>
</ul>
</nav>
<h1> My Awesome Website</h1>
<p>Isn't my website so awesome??</p>
<button onclick="f()">Click Me!</button>
<p id="demo"></p>
<script>
function f() {
var person = prompt("Please enter your name", "");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
<table>
<tr>
<th>Website</th><th>Awesomeness Level</th>
</tr>
<tr>
<td>My Awesome Website</td><td>100%</td>
</tr>
</table>
</body>
</html>