As I work on my very first website, I've encountered a strange issue with the navigational links at the top of each page. I've noticed that pages with content exceeding the maximum vertical pixels occupy a specific width, while those with less content have a different width, even though the menu code remains the same. Why does this occur and how can it be fixed? Below is the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About</title>
<link rel="stylesheet" type="text/css" href="about_style.css" />
</head>
<body>
<nav id="menu">
<ul>
<li id="home"><a href="../index.html">Home</a></li>
<li id="news"><a href ="../news/index_news.html">News</a></li>
<li id="tragic_complexity"><a href="../tragic/index_tr.html">Tragic Complexity</a></li>
<li id="d_diary"><a href="../diary/d_diary.html">D Diary</a></li>
<li id="geeks"><a href="../geeks/geeks.html">Geeks = 1</a></li>
<li id="about">About</li>
</ul>
</nav>
<ul id="info">
<li>
About the site
</li>
<li>
About the founder
</li>
</ul>
</body>
</html>
css file:
body
{
background-image:linear-gradient(#336666, #66cccc);
}
#info,#menu
{
text-align:center;
}
#info li
{
display:block;
font-family:serif;
height:300px;
width:600px;
border:1px solid black;
overflow:hidden;
padding: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
margin:20px auto 20px auto;
background-color:white;
}
#menu ul li
{
display: inline-block;
margin:auto 20px auto 20px;
font-size: 150%;
font-family: Arial, Verdana, sans-serif;
}