Question

I have a vertical header with my logo and navigation, separated by a border. I’d like to keep the logo and border where they are while moving the navigation elements down 25px. How do I achieve this?

header {
    background: none;
    float: left;
    margin-top: 123px;
    margin-left: 22px;
    position: fixed;
    width: 158px; 
}
header logo {
    margin-top: ;

}
header nav {
    border-top: 1px solid #202020;
    margin-top: 25px;
    width: 158px;
}
header nav ul li {
    font-family: dalle;
    padding-left: 55px;
}

<header>
        <logo>
            <a href="#"><img src="img/logo.png" alt="whskytngfxtrt logo" height="139" width="158" /></a></li>
        </logo><!-- end logo -->
        <nav>
            <ul>
                <li id="blog"><a href="#">BLOG</a></li>
                <li id="work"><a href="#">WORK</a></li>
                <li id="about"><a href="#">ABOUT</a></li>
                <li id="contact"><a href="#">CONTACT</a></li>
            </ul>
        </nav><!-- end nav -->
    </header><!-- end header -->

Answer 1

Just add padding-top:25px to header nav:

header nav {
    border-top: 1px solid #202020;
    margin-top: 25px;
    width: 158px;
    padding-top:25px;
}