Hello Everyone,
I’m working on my tribute page project and I’d like to create a nav bar at the top of the page that links to the various sections in the tribute page. When I tried to space out my links using justify-content:space-evenly; it doesn’t seem work. Thanks for all of your help!
<!DOCTYPE html>
<html lang="en">
<main id="main">
<head>
<meta="utf-8">
<link rel="stylesheet" href="styles.css">
<div id="top-bar">
<h1 id="title">Alan Turing</title>
<p class="top-link">Childhood</p>
<p class="top-link">College</p>
<p class="top-link">Wartime Contributions
</p>
<p class="top-link">Tragedy and Pardon
</p>
</div>
</head>
<body>
<div id="img-div">
<img src="https://www.history.org.uk/library/1506/0000/0035/alan_turing_and_binary_code_image_640.jpg" id="image">
<figcaption id="img-caption">Alan Turing</figcaption>
</div>
<div id="tribute-info">
<h2>Childhood</h2>
<h3>College</h3>
<h5>Tragedy and Pardon</h5>
</body>
<footer>
More information can be found <a href="https://en.wikipedia.org/wiki/Alan_Turing" id="tribute-link" target="_blank">here</a>
</footer>
</main>
</html>
html{background-color:FFFBEB;
}
body{margin:auto;
}
#top-bar{background-color:#263159;
width:100%;
position:absolute;
top:0px;
text-align:center;
height:75px;
}
.top-link{
display:flex;
flex-direction:row;
justify-content: space-evenly;
font-size:10px;
}
#image{height:auto;
max-width:100%;
display:block;
margin:auto;
padding-top:105px;
}
#img-caption{
display:inline-block;
}