I have a link, and it is below my header. I have tried float:top (I don't even think that is real)
.header {
background-color: grey;
border-radius: 2px;
padding: 1%;
margin: 0%
}
#links {
font-size: xx-large;
text-align: right;
color: white;
}
<div >
<header>
<h1>Jackson Pope</h1>
<div id="links">
<a href="about.html">About Me</a>
</div>
</header>
</div>
CodePudding user response:
header {
background-color: grey;
border-radius: 2px;
padding: 1%;
margin: 0%;
display: flex;
justify-content: space-between;
align-items: center;
}
#links {
font-size: xx-large;
text-align: right;
color: white;
}
<header>
<h1>Jackson Pope</h1>
<div id="links">
<a href="about.html">About Me</a>
</div>
</header>
CodePudding user response:
If you want to have the link still pinned at the top, then use position: fixed;
.header {
background-color: grey;
border-radius: 2px;
padding: 1%;
margin: 0%
padding-top: 10px;
}
#links {
font-size: xx-large;
text-align: right;
color: white;
position: fixed;
top: 10px;
right: 10px;
}
<div >
<header>
<h1>Jackson Pope</h1>
<div id="links">
<a href="about.html">About Me</a>
</div>
</header>
</div>