Question 368118 in Html Question posted in
Some basic documentation can be found here.

Html – Why is the flexbox container not changing position?

I’m trying to make a 2×2 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;
}
Tags:

2

Answers


  1. 0

    You don’t see changing, because you have syntax error in your css, you need delete "*/" => screenshot

    Login or Signup to reply.
  2. 0

    It’s difficult to understand what you’re asking. if you want to center the .container horizontally on the page. you can use margin: auto along with a fixed width.

    .container {
    max-width: 600px;
    margin: auto;
}
  
.row {
    display: flex;
    justify-content: center;
}
  
.box {
    width: 100px;
    height: 100px;
    background-color:#cccccc;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    margin: 2px;
}
    <div class="nav">
    <a class="link" href="#">Work</a>
    <a class="link" href="#">About</a>
    <a class="link" href="#">Contact</a>
</div>

<div class="container">
    <div class="row">
        <div class="box"><a href="#">Link 1</a></div>
        <div class="box"><a href="#">Link 2</a></div>
    </div>
    <div class="row">
        <div class="box"><a href="#">Link 3</a></div>
        <div class="box"><a href="#">Link 4</a></div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search