I'm trying to make a 2x2 flexbox container for my webpage that'll hold images and links to other parts of my website. I made the container, but I can't seem to get the container to move no matter what I do. I tried adjusting the margins, padding, and the position of it and nothing is adjusting the container's position.
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;}