Merhabalar tema kodluyordum ama bi yerde takıldım main kısmı nav kısmının üstüne geliyor yardımcı olur musunuz

HTML KODLARI






Navbar Try ...



avatar

For Example



  • Home
    About
    Contact
    Blog
    Donate





    • TITLE HEADING


    Title description, Dec 7, 2017

    Some text..


    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.




    TITLE HEADING


    Title description, Sep 2, 2017

    Some text..


    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

    CSS KODLARI
    body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    }

    /* navbar */

    .nav {
    height: 100%;
    width: 15%;
    position: fixed;
    float: left;
    top: 0;
    left: 0;
    background-color: #111111;
    padding-top: 100px;
    }

    .nav li {
    list-style: none;
    position: absolute;
    top: 45%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);;
    }

    .nav a {
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    z-index: 1;
    overflow-x: hidden;
    font-size: 25px;
    color: #ffffff;
    display: block;
    transition: 0.4s;
    }

    .nav a:hover {
    background-color: #ffffff;
    color: #111111;
    transition: 0.4s;
    }

    .avatar {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    }

    .avatar:hover {
    opacity: 0.8;
    }

    h1 {
    position: absolute;
    font-size: 16px;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    }

    h1:hover {
    opacity: 0.8;
    }



    /* main */

    .wrapper {
    position: absolute;
    height: 100%;
    width: 85%;
    color: #ffffff;
    background: #ccccccE3;
    }

    .main {
    float: right;
    }