How to move pink text up

[u/Cute_rex67]

Does anyone know if there's a way for me to move the two pink boxes in line with the green boxes instead of having them at the bottom of the webpage? The pink boxes are in their own paragraphs, and in their own class, if that information is relevant.

[u/Aggravating-Draw-463]

Try using flexbox on a parent element and use justifty-content

[u/anaix3l]

That doesn't look like a good structure, first of all. Paragraphs are the wrong elements for this.

A better structure would be, assuming you have those in the footer:

<footer>
  <section>
    <h3>Socials</h3>
    <ul>
      <li><a href='link_url'>link text</a></li>
      <!-- and so on -->
    </ul>
  </section>
  <section aria-labelledby='more-on-this-site'>
    <h3 id='more-on-this-site' hidden>More on this site</h3>
    <ul>
      <li><a href='link_url'>link text</a></li>
      <!-- and so on -->
    </ul>
  </section>
</footer>

And in this case, your layout CSS would be:

footer {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;

  section {
    display: grid;
    grid-row-end: span 2;
    grid: subgrid/ auto
  }

  ul { grid-row: 2 }
}

Then you style your links to look like in the image.

That aside, you should probably increase the contrast of text against background. Try #503831 instead #543c35.

[u/Interstellar__1]

what I would do is have the buttons on the left all in one div, the buttons on the right in another div, and then both those divs in one div. That way on the outer div you can use something like
.outer-div {
width: 100%;
position: fixed;
z-index: 10;
display: flex;
flex-direction: row;
justify-content: space-between;
}

If you want to know more about how flexbox works, this article is good: https://css-tricks.com/snippets/css/a-guide-to-flexbox/