Justify-content: space-around property is not working in the second flex box (nested), why can this be?
code:
html-
<body>
<div class="navbar">
<div class="logo"><img src="redragon-logo.webp" alt="redragon-logo"></div>
<div class="otherlinks">
<div class="navbar-box1">HOME</div>
<div class="navbar-box2">PRODUCTS</div>
<div class="navbar-box3">BLOG</div>
<div class="navbar-box4">REVIEWS</div>
<div class="navbar-box5">CONTACT</div>
<div class="navbar-box6">
<select name="currency" id="currency" class="currency-label">CURRENCY
<option value="default" selected>Currency</option>
<option value="rupee">₹ Rupee</option>
<option value="yen">¥ Yen</option>
<option value="dollar">$ USD</option>
<option value="dollar">$ CAD</option>
</select>
</div>
</div>
</div>
</body>
CSS –
*{
margin: 0;
padding: 0;
}
/* navbar styling starts*/
.navbar{
padding: 0px 30px;
background-color: #111;
font-family: abel,arial;
display: flex;
height: 7vw;
justify-content: space-between;
align-items: center;
}
/* .logo{
display: flex;
justify-content: space-evenly;
} */
.otherlinks{
color: #ccc;
display: flex;
justify-content: space-around;
}
select{
padding: 0px 3px ; /*design this select input*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redragon</title>
<link rel="stylesheet" href="website.css">
</head>
<body>
<div class="navbar">
<div class="logo"><img src="redragon-logo.webp" alt="redragon-logo"></div>
<div class="otherlinks">
<div class="navbar-box1">HOME</div>
<div class="navbar-box2">PRODUCTS</div>
<div class="navbar-box3">BLOG</div>
<div class="navbar-box4">REVIEWS</div>
<div class="navbar-box5">CONTACT</div>
<div class="navbar-box6">
<select name="currency" id="currency" class="currency-label">CURRENCY
<option value="default" selected>Currency</option>
<option value="rupee">₹ Rupee</option>
<option value="yen">¥ Yen</option>
<option value="dollar">$ USD</option>
<option value="dollar">$ CAD</option>
</select>
</div>
</div>
</div>
</body>
</html>
>Solution :
This is because the default width is "auto" which takes up as little space as possible.
If you add width in this class:
.otherlinks{
color: #ccc;
display: flex;
justify-content: space-around;
width: 600px;
}
This should solve your problem, it’s up to you to choose the width value that suits you best.
I invite you to consult this link to find the best unit for width:
CSS values and units
I advise you: "vw"
The result:
*{
margin: 0;
padding: 0;
}
/* navbar styling starts*/
.navbar{
padding: 0px 30px;
background-color: #111;
font-family: abel,arial;
display: flex;
height: 7vw;
justify-content: space-between;
align-items: center;
}
/* .logo{
display: flex;
justify-content: space-evenly;
} */
.otherlinks{
color: #ccc;
display: flex;
justify-content: space-around;
width: 600px;
}
select{
padding: 0px 3px ; /*design this select input*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redragon</title>
<link rel="stylesheet" href="website.css">
</head>
<body>
<div class="navbar">
<div class="logo"><img src="redragon-logo.webp" alt="redragon-logo"></div>
<div class="otherlinks">
<div class="navbar-box1">HOME</div>
<div class="navbar-box2">PRODUCTS</div>
<div class="navbar-box3">BLOG</div>
<div class="navbar-box4">REVIEWS</div>
<div class="navbar-box5">CONTACT</div>
<div class="navbar-box6">
<select name="currency" id="currency" class="currency-label">CURRENCY
<option value="default" selected>Currency</option>
<option value="rupee">₹ Rupee</option>
<option value="yen">¥ Yen</option>
<option value="dollar">$ USD</option>
<option value="dollar">$ CAD</option>
</select>
</div>
</div>
</div>
</body>
</html>