Why is flex-direction:row not placing the items side by side?

Question

I am trying to get these two div items to be placed side by side with display: Flex, flex-direction: Row. However it doesn't seem to be working.

CSS:

.projectBack {
    padding-top: 2em;
    padding-bottom: 2em;
    margin: auto;
    max-width: 680px;
    display: flex;
    flex-direction: row;
}

.projectBackText {
    color: #AFAFAF;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    -webkit-transition: 500ms;
}

.projectBackText:hover{
    transform: translateX(15px);
    transition: 500ms;
}

.projectBackArrow {
    background-color: pink;
    background-image: url("img/backArrowLight.png");
    background-size: 8px;
    background-position: center;
    background-repeat: no-repeat;
    height: 16px;
}

HTML:

<div class="projectBack">
    <a href="index.html">
        <div class="projectBackArrow"></div>
        <div class="projectBackText">Projects</div>
    </a>
</div>

Answer 1

flex-direction: row applies to the direct children of the Element, in this case <a>.

You should swap <a> and <div class="projectBack">.

<a href="index.html">
  <div class="projectBack">
    <div class="projectBackArrow">⮌</div>
    <div class="projectBackText">Projects</div>
  </div>
</a>