I'm currently working on a navigation bar with a central title and links to other pages aligned to the right. Despite using text-align: center, the title remains off-center. I've implemented a flexbox to ensure that the title and links are on the same line, but the issue persists. Is there an issue with this approach (e.g., incompatibility between text-align and flexbox) or is there a flaw in my code?
Below is the snippet of my HTML/CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
nav {
width: 100%;
height: 60px;
background-color: black;
display: flex;
}
nav p {
text-align: center;
font-family: arial;
color: white;
font-size: 24px;
line-height: 55px;
float: left;
padding: 0px 20px;
flex: 1 0 auto;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 14px;
padding: 22px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 180px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
}<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<p> The Novel Column </p>
<ul>
<li> <a href="#"> Content </a>
<ul>
<li> <a href="#"> Subsection 1 </a> </li>
<li> <a href="#"> Subsection 2 </a> </li>
<li> <a href="#"> Subsection 3 </a> </li>
<li> <a href="#"> Subsection 4 </a> </li>
</ul>
</li>
<li> <a href="#"> About Us </a> </li>
</ul>
</nav>
</body>
</html>Your assistance is greatly appreciated!