I am taking an intro video course and after comparing my code to the instructors many times, my html and css are rendering differently for my navbar buttons. Using Chrome as my browser, I run their code in a different VScode window and the link titles show up in the link as they should, but I can not figure out why my doesn't. I have played around with different padding values and float values but with no success. I can't figure out where I am going wrong. Apparently these methods are no longer best practices now that there is flexbox and Grid but we haven't gotten to those yet and so this exercise is using floats. I half feel I should ignore the problem and revisit after we cover the newer methods but it irks me to no be able to figure out why I can't get my link tiles centered in the park of the link you click on.
I've been going down all kinds of rabbit holes with no luck, hoping something stands out to someone with more experience. Any insight would be greatly appreciated.
Please see my code below:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="welcome to the most extraordinary hotel in Boston Massachusetts">
<meta name="keywords" content="hotel,boston hotel, new england hotel">
<link rel="stylesheet" href="css/style.css">
<title>Hotel BT | Welcome</title>
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1 class="logo">
<a href="index.html">HBT</a>
</h1>
<ul>
<li><a class="current" href="index.html"></a>Home</li>
<li><a href="about.html"></a>About</li>
<li><a href="contact.html"></a>Contact</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
css
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main styling: anything that doesn't have a id or class i.e., body links h , p ...etc. */
html,body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7em;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
padding-bottom: 20px;
}
p {
margin: 10px 0;
}
/* Utility Classes */
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 0 20px;
}
/* navbar */
#navbar {
background: #333;
color: #fff;
overflow: auto;
}
#navbar a {
color: #fff;
}
/* after learning flexbox/grid... dont float things like this */
#navbar h1 {
float: left;
padding-top: 20px;
}
#navbar ul {
list-style: none;
float: right;
}
#navbar ul li {
float: left;
}
#navbar ul li a {
display: block;
padding: 20px;
text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.current {
background: #444;
color: #f7c08a;
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
