Hello I am having trouble editing my personal site. I am trying to display some links in the top-right of the header but it is showing up below the whole header in a place I don't want It to be in...
Here is my HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>KM4HHA - Home</title>
<meta name="description" content="Home of KM4HHA.">
<meta name="keywords" content="ham,amatuer,personal,home,site">
<meta name="author" content="Travis Hurst">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="mainHead">
<div class="mainHeadInfo">
<h1>KM4HHA.tk</h1>
<p>Home of Travis Hurst</p>
</div>
<div class="socialLinks">
<a href="http://ift.tt/1tlIbxb"><span>Google+</span></a>
</div>
</header>
<main>
<section>
<header>
<h2>MAIN</h2>
</header>
<article>
<header>
<h3>About me.</h3>
</header>
<p>Hello welcome to the worlds most simplest website. Here it's nothing more than an article about me<br>
and my current ham equipment and links to me on sites like google and youtube and blah blah blah.<br>
I am currently using a Baofeng BF-F8HP as my main and only radio because I just started out.<br>
I currently hold a technician class license.
</p>
</article>
</section>
</main>
</body>
</html>
And my CSS:
body {
width:50%;
margin-left:auto;
margin-right:auto;
}
.mainHead {
background-color:darkblue;
color:white;
border-width:2px;
border-color:black;
border-style:solid;
border-radius:5px;
}
.mainHeadInfo {
margin-left:15px;
width:20%;
}
main {
background-color:darkblue;
color:white;
border-width:1px;
border-style:dotted;
border-color:black;
border-radius:5px;
margin-top:1px
}
section {
background-color:white;
color:black;
}
section header {
background-color:lightblue;
}
article header {
background-color:white;
}
.socialLinks {
text-align:right;
float:right;
color:white;
}
.socialLinks a {
background-color:darkorange;
text-decoration:none;
color:white;
font-size:25px;
padding:5px;
border-radius:8px;
}
Please help!
Aucun commentaire:
Enregistrer un commentaire