How to remove padding around flag-CodePudding

I want to reduce the left and right padding.

The space around the flag is too much and I'd prefer that the parent div immediately surrounds the child div's

That way, I can change the border properties for the parent div but I'm not able to reduce the size of the padding around the 'flag'

.flex {
  display: flex;
  border-color: black;
  border: 5px;
  border-style: dashed;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

.box1 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 40px 0 0 40px;
}

.box2 {
  height: 200px;
  width: 100px;
  background-color: whitesmoke;
}

.box3 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 0 40px 40px 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="nigerian-flag.css">
  <title>nigerian flag</title>
</head>

<body>
  <div >
    <div >
    </div>
    <div >
    </div>
    <div >
    </div>
  </div>
</body>

</html>

CodePudding user response：

It is possible to do that by simply changing display: flex; to display: inline-flex;. Centering the flag can then be done if needed.

.flex {
  display: inline-flex;
  border-color: black;
  border: 5px;
  border-style: dashed;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

.box1 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 40px 0 0 40px;
}

.box2 {
  height: 200px;
  width: 100px;
  background-color: whitesmoke;
}

.box3 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 0 40px 40px 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="nigerian-flag.css">
  <title>Nigerian flag</title>
</head>

<body>
  <div >
    <div >
    </div>
    <div >
    </div>
    <div >
    </div>
  </div>
</body>

</html>

CodePudding user response：

you can add to the flex class style, you can change the width if you want

 .flex{ width: 50%; margin: 0 auto;}

CodePudding user response：

Since your flag has a total width of 300px you can easily add "width:300px;" in ".flex"

.flex {
  display: flex;
  border-color: black;
  border: 5px;
  border-style: dashed;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  width: 300px;
}

.box1 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 40px 0 0 40px;
}

.box2 {
  height: 200px;
  width: 100px;
  background-color: whitesmoke;
}

.box3 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 0 40px 40px 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="nigerian-flag.css">
  <title>nigerian flag</title>
</head>

<body>
  <div >
    <div >
    </div>
    <div >
    </div>
    <div >
    </div>
  </div>
</body>

</html>