I want to align the title of my site to the left of the header and align the navbar links to the right of the header. I’m pretty new to coding so I’m learning still.
Ive tried working with flex box but can’t seem to figure it out.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
<title>Redacted - Home</title>
</head>
<body>
<div class="header">
<h1>Redacted</h1>
<div class="topnav">
<a href="index.html">Home</a>
<a href="resume.html">Resume</a>
<a href="contact.html">Contact</a>
</div>
</div>
<div class="row">
<div class="main">
</div>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
.header {
padding: 10px;
text-align: left;
background-color: black;
display: flex;
}
.header h1 {
color: white;
justify-content: flex-start;
margin-left: initial;
}
.topnav {
overflow: hidden;
display: flex;
}
.topnav a {
display: block;
float: right;
text-align: center;
padding: 10px;
text-decoration: none;
color: white;
justify-content: flex-end;
margin-right: auto
}
.topnav a:hover {
background-color: white;
color: black;
}
New contributor
user25509231 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.