Align some links with CSS

I'm trying to make a website, but can't quite figure our some of the CSS needed to align my text correctly. I would like to have the three links aligned directly underneath my name one at the end, one in the middle and one at the other end.

Here is my HTML followed by my CSS:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Nick Friederich</title>
        <link rel="stylesheet" type="text/css" href="./CSS/main.css" />
    </head>


    <body>
        <div id="wrapper" class="wrapper">

            <div id="header">

            </div>

            <div id="main" class="main">
                <h1>Nick Friederich</h1>

                    <span class="sectionLinks"><a>About</a></span>
                    <span class="sectionLinks"><a>Resume</a></span>
                    <span class="sectionLinks"><a>Portfolio</a></span>
            </div>
        </div>
    </body>



</html>

CSS:

    body {
    font-family:Helvetica, Times, Sans-Serif;
    color: #666;
    background-color: #eee;
}

h1{
    font-size:75px;
}

.sectionLinks{
    margin-right:20px;
    margin-left: 20px;
    margin-top: -20%;

}

.main{
    position: absolute;
       width: 50%;
       left: 50%;
       margin-left: -20%;
       height: 40%;
       top: 50%;
       margin-top: -20%;
       margin-bottom: -50%;
}

.wrapper{
    margin:0 auto;
    text-align:center;
}

Answers


Got it. I just modified the margin of the h1


While you've fixed the problem, it's very common to wrap your links in a div and style them inside the div.

<div id="main">
     <h1>Nick Friederich</h1>
     <div id="links">
          <span class="sectionLinks"><a>About</a></span>
          <span class="sectionLinks"><a>Resume</a></span>
          <span class="sectionLinks"><a>Portfolio</a></span>
     </div>
</div>

You'd move the container with the links id and space the links based on their class.

Edit: Also, make sure you are using id and class properly in your CSS. Class is to be used if you're going to have multiple instances of that item on the site, id is for unique items.


Need Your Help

Unable to set checkbox property true and false based on ajax response

jquery

Based on the ajax response i am trying to check or uncheck checkbox , i have tried this way

Swift - Redirect Console Log To Document Folder

ios objective-c logging console swift2

I'm looking for the Swift equivalent of the following Objective C common code.