How to center a card div inside a grid-layout-CodePudding

I am trying to create an HTML Layout, which consists of two columns. In the right column I want to display a card-container and on each side next to it a chevron icon. I am using SCSS to style my layout and something is off: The card-container does not seem to be centered, actually it seems as if it doesn't fit inside its container.

I have been struggling to figure out why this is happenning and just couldn't come up with a solution. I would appreciate any help!

HTML:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <link href="./test.scss" rel="stylesheet">
    <title>Document</title>
</head>
<body> 
    <div >
        <div ></div>
        <div >
          <span >chevron_left</span>
          <div ></div>
          <span >chevron_right</span>
        </div>
    </div>
</body>

SCSS:

.container {
    display: grid;
    grid-template-columns: 35fr 65fr;
  
    .right-column {
      display: grid;
      grid-template-columns: 15fr 70fr 15fr;
      height: 95vh;
  
      span {
        height: 50px;
        margin: 20px;
        font-size: 50px;
        cursor: default;
        display: flex;
        align-items: center;
  
        &:hover {
          font-size: 60px;
        }
  
        &.chevron-left {
          justify-content: center;
        }
  
        &.chevron-right {
          justify-content: center;
        }
      }

      .card {
        width: 100%;
        height: 100%;
      
        margin: 50px;
        border: 3px solid black;
        border-radius: 8px;
        box-sizing: border-box;
        overflow: auto;
    }
  }
}

CodePudding user response：

First of all, the reason, your card is outside your the box of your right column, is because it has a height of 100% of its parent PLUS it has a margin, thereby pushing it outwards and overflowing its column it is supposed to be contained within. To prevent it, use calc() function, for example: height: calc(100%- 100px) and width: calc(100% - 100px) considering margin: 50px means a total of 100px in each axis.
Second, to center everything vertically inside your right column, you need to set align-items: center on your .right-column.
Third, to center your card horizontally as well, set justify-self: center on your .card

Update: Since, your comment pointed out that you only need top and bottom margins, you should set width: 100% on your card and everything will work as expected - also you would not need to center your card horizontally then, thereby no need for justify-self: center on your card. I edited the code snippet below to account for this.

.container {
  display: grid;
  grid-template-columns: 35fr 65fr;
}
.right-column {
  display: grid;
  grid-template-columns: 15fr 70fr 15fr;
  height: 95vh;
  align-items: center;
}
.right-column span {
  height: 50px;
  margin: 20px;
  font-size: 50px;
  cursor: default;
  display: flex;
  align-items: center;
}
.right-column:hover {
  font-size: 60px;
}

.right-column .chevron-left {
  justify-content: center;
}

.right-column .chevron-right {
  justify-content: center;
}

.right-column .card {
  width: 100%;
  height: calc(100% - 100px);

  border: 3px solid black;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet" />
    <link href="test.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <div >
      <div ></div>
      <div >
        <span >chevron_left</span>
        <div ></div>
        <span >chevron_right</span>
      </div>
    </div>
  </body>
</html>