Is there a way I can have 2 div elements on top of each other but not overlapping?

Question

What I want to do is make my sidebar cards be on the right and not the left. I've tried to use the display: grid; and that didn't work. I've tried to use the left: 0; and right: 0; in css. Nothing is working for me. My full code is at github.com.

Please ingnore the colors, I tried to draw it in google drawings so it's not good.

This is how it is:

And this is how I want it to look:

Answer 1

There are multiple ways to achieve this. But since you are using css grid do the following: Add an extra class of project-card__1 and project-card__2 to the cards and then specify the grid-template-columns in your css.

See the demo below

p {
  background-color: #179595;
  width: auto;
}
.project-card {
  margin: 5px;
  width: 25%;
  border: 4px solid #00688b;
  background-color: #008b8b;
  height: 354.33px;
  margin-bottom: 50px;
  margin-right: 50px;
}
h1 {
  text-align: center;
  padding-top: 5px;
}
body {
  background-image: linear-gradient(270deg, #8b0046, #8b008b);
  height: 100vh;
}
span {
  cursor: ;
}
.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  right: 0;
}

.project-card__1 {
  grid-column: 5 / 7;
  grid-row: 1;
  width: 100%;
}
.project-card__2 {
  grid-column: 5 / 7;
  grid-row: 2;
  width: 100%;
}

  <h3>
      Welcome to my GitHub Pages website this is where you can learn about me,
      find my games, and suggest ideas for anything!
    </h3>
    <div id="cards" class="cards">
      <div id="project1" class="project-card project-card__1">
        <h1>Web Designer Tycoon</h1>
        <p>
          This is a idle tycoon like game where you have to make money by making
          web programs. People buy your web programs for money. If you get
          better at coding (in the game) then you will get more money for each
          program you make. Itis currently in the BETA stage and it will get
          released after lots of testing and a couple more changes. Thank you
          for your patience.
          <span
            onclick="window.location.href = 'https://codepen.io/hacker19374/project/full/Zyraey/'"
            >Click me to go to Web Designer Tycoon</span
          >
        </p>
      </div>
      <div id="project2" class="project-card project-card__2">
        <h1>Burger Clicker</h1>
        <p>
          This game is a little bit different. It is a clicker game where you
          clic and click and click over and over to try to get the most money
          you can and you can use that money to buy
        </p>
      </div>
    </div>

Answer 2

You could use a grid like this. For detail explanations check here

*,
 :before,
 :after {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 60% 40%;
  grid-template-areas: "header header" "content cards";
  width: 100%;
}

#header {
  grid-area: header;
}

#content {
  grid-area: content;
}

#cards {
  grid-area: cards;
}

<h3 id="header">Welcome to my GitHub Pages website this is where you can learn about me, find my games, and suggest ideas for anything!</h3>
<div id="content">
</div>
<div id="cards" class="cards">
  <div id="project1" class="project-card">
    <h1>
      Web Designer Tycoon
    </h1>
    <p>This is a idle tycoon like game where you have to make money by making web programs. People buy your web programs for money. If you get better at coding (in the game) then you will get more money for each program you make. Itis currently in the BETA
      stage and it will get released after lots of testing and a couple more changes. Thank you for your patience. <span onclick="window.location.href = 'https://codepen.io/hacker19374/project/full/Zyraey/'">Click me to go to Web Designer Tycoon</span></p>
  </div>
  <div id="project2" class="project-card">
    <h1>
      Burger Clicker
    </h1>
    <p>This game is a little bit different. It is a clicker game where you clic and click and click over and over to try to get the most money you can and you can use that money to buy</p>
  </div>
</div>