Content sticks to a div, doesn't go at the bottom

Question

I'm trying to make #tech go after the blue arrows, but they keep sticking to another div, and position:absolute & bottom:0 / position: relative & bottom: 0 don't have any effect on them.

I've thought about moving the scroll-down div in the central one, and maybe that should help. How can I make the h6 .techie text stick to the bottom of #tech?

#central {
    margin-top: 11vw;
    font-family: 'Roboto Condensed', sans-serif;   
    user-select: none;
    position: relative;
    display: table;
    width: 100%;
}

#intro-wrap {
    display: table-cell;
    vertical-align: middle;
    max-width: 710px;
    width: 100%;
}

#intro {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 300px;
    text-align: center;
}

.intro {
    font-size: 24px;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7;
}

/*Buton MORE*/

#button-wrap {
    postion:relative;
    text-align:center;
    margin-top: 2.5vw;
}

#more {
    font-family: 'Proxima Nova';
    font-weight: 600;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    border: 2px solid #77dff1;
    padding: 15px;
    margin: 0 auto;
}

#more:hover {
      font-weight: 100;
      color: #00000f;
      background: #77dff1;
}

/*Scroll*/

#scroll-down {
    font-size: 20px;
    color: #77dff1;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
}

.stanga {
    float:left;
    margin-left: 1vw;
}

.dreapta {
    float: right;
    margin-right: 1vw;
}

/*scroll / jos*/

#scroll {
    max-width: 100%;
}

#tech {
    width: 100%;
    height: 500px;
    text-align: center;
}

#tech > .fa-3x {
    padding: 10px;
}

.techie {
    width: 100%;
    bottom: 0;
    font-size: 50px;
}

<div id="central">
            <div id="intro-wrap">
                <h1 id="intro">hi</h1>
                <h6 class="intro">This is a small step to achieve one of my dreams. A small place on the internet where people get to know me. Creative and functional, built with passion and hard work.</h6>
                <div id="button-wrap">
                    <button type="button" id="more">Learn more</button>
                </div>
            </div>
        </div>
        <div id="scroll-down">
                <i class="fa fa-angle-down stanga" aria-hidden="true"></i>
                <i class="fa fa-angle-down centru" aria-hidden="true"></i>
                <i class="fa fa-angle-down dreapta" aria-hidden="true"></i>
        </div>
        <div id="scroll">
            <div id="tech">
                <i class="fa fa-television fa-3x" aria-hidden="true"></i>
                <i class="fa fa-laptop fa-3x" aria-hidden="true"></i>
                <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
                <i class="fa fa-mobile fa-3x" aria-hidden="true"></i>
                <i class="fa fa-gamepad fa-3x" aria-hidden="true"></i>
                <h6 class="techie">I consider myself a techie. I love all kinds of technology and I'm up to learn more.</h6>
            </div>

Answer 1

Applied postion:relative to the parent #tech and then added position:absolute to the .techie. After this your .techie will not go the bottom of the div because there is default css given by browser that is margin is added. So this replaced by margin:0px.

#central {
    margin-top: 11vw;
    font-family: 'Roboto Condensed', sans-serif;   
    user-select: none;
    position: relative;
    display: table;
    width: 100%;
}

#intro-wrap {
    display: table-cell;
    vertical-align: middle;
    max-width: 710px;
    width: 100%;
}

#intro {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 300px;
    text-align: center;
}

.intro {
    font-size: 24px;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7;
}

/*Buton MORE*/

#button-wrap {
    postion:relative;
    text-align:center;
    margin-top: 2.5vw;
}

#more {
    font-family: 'Proxima Nova';
    font-weight: 600;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    border: 2px solid #77dff1;
    padding: 15px;
    margin: 0 auto;
}

#more:hover {
      font-weight: 100;
      color: #00000f;
      background: #77dff1;
}

/*Scroll*/

#scroll-down {
    font-size: 20px;
    color: #77dff1;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
}

.stanga {
    float:left;
    margin-left: 1vw;
}

.dreapta {
    float: right;
    margin-right: 1vw;
}

/*scroll / jos*/

#scroll {
    max-width: 100%;
}

#tech {
    width: 100%;
    height: 500px;
    text-align: center;
    position:relative;
}

#tech > .fa-3x {
    padding: 10px;
}

.techie {
    width: 100%;
    font-size: 50px;
    position:absolute;
    bottom: 0;
    margin:0px;
    
}

<div id="central">
            <div id="intro-wrap">
                <h1 id="intro">hi</h1>
                <h6 class="intro">This is a small step to achieve one of my dreams. A small place on the internet where people get to know me. Creative and functional, built with passion and hard work.</h6>
                <div id="button-wrap">
                    <button type="button" id="more">Learn more</button>
                </div>
            </div>
        </div>
        <div id="scroll-down">
                <i class="fa fa-angle-down stanga" aria-hidden="true"></i>
                <i class="fa fa-angle-down centru" aria-hidden="true"></i>
                <i class="fa fa-angle-down dreapta" aria-hidden="true"></i>
        </div>
        <div id="scroll">
            <div id="tech">
                <i class="fa fa-television fa-3x" aria-hidden="true"></i>
                <i class="fa fa-laptop fa-3x" aria-hidden="true"></i>
                <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
                <i class="fa fa-mobile fa-3x" aria-hidden="true"></i>
                <i class="fa fa-gamepad fa-3x" aria-hidden="true"></i>
                <h6 class="techie">I consider myself a techie. I love all kinds of technology and I'm up to learn more.</h6>
            </div>