Css 显示Reaction组件上的问题.使用FlexBox时的意外大小

我正在使用NextJS/Reaction启动一个简单的测试应用程序.

代码如下:

Board.tsx文件内容:

import './Board.css';

export default function Board() {
    return <div className="board">
    <Row/>
    <Row/>
    <Row/>
  </div>
} /* End of Board */

function Row() {
    return <div className="row">
    <Cell/>
    <Cell/>
    <Cell/>
  </div>
} /* End of Row */

function Cell() {
    return <div className="cell"/>
} /* End of Cell */

和Board.css文件内容:

.cell {
  width: 3rem;
  height: 3rem;
  background-color: rgb(255, 255, 0);
  border-width: 2px;
  border-color: rgb(55, 55, 55);
  margin: 11%;
}

.row {
  display: flex;
  flex-direction: row;
}

.board {
  display: flex;
  flex-direction: column;
}

顶部是app/page.tsx文件:

import Image from 'next/image'
import Board from './components/Board'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      X4C APP
      <Board/>
    </main>
  )
}

以下是运行该应用程序时网络浏览器中显示的内容:

最后，我有一个问题.当单元格组件的宽度和高度固定时，为什么我们看不到完美的黄色方块？

我可以通过实验看到，如果我移除这两个块

.row {...}
.board {...}

从Board.css文件中，我得到了完美的正方形.

那么，是什么导致了这两个区块的问题呢？