我正在尝试为我的网页制作一个 2x2 Flexbox 容器,用于保存图像和指向我网站其他部分的链接。我制作了容器,但无论我做什么,似乎都无法让容器移动。我尝试调整边距、填充和它的位置,但没有任何东西可以调整容器的位置。
CodePen:https://codepen.io/Dara-Jackson/pen/dyLZvKR
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Dara Jackson - Designer</title>
</head>
<body>
<!-- nav bar -->
<div class="nav">
<a class="link"
href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/index.html">Work</a>
<a class="link"
href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/about.html">About</a>
<a class="link"
href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/about.html">Contact</a>
</div>
<!-- end of nav bar -->
<div class="container">
<div class="row">
<div class="box"><a href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/motion.html">Link 1</a></div>
<div class="box"><a href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/visid.html">Link 2</a></div>
</div>
<div class="row">
<div class="box"><a href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/p5js.html">Link 3</a></div>
<div class="box"><a href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/miscdesigns.html">Link 4</a></div>
</div>
</div>
</body>
</html>
CSS:
.container {
display: flex;
flex-direction: column;
padding-top: 70px;
padding-left: 70px;
margin-left: 70px;
}
.row {
display: flex;
flex-direction:row;
}
.box {
/* width: 100px;
height: 100px; */
background-color:#cccccc;
border: 1px solid black;
display: flex;
/* justify-content: center;
align-items: center; */
margin-top:1px;
padding:200px;
}