So I have this code where I will put 12 boxes inside a div in a row but 1 box can't fit inside.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flex Function Example</title>
<style>
div {
display: flex;
display: -ms-flexbox;
display: -moz-flexbox;
display: -o-flexbox;
display: -webkit-flexbox;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-o-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
height: 200px;
padding: 1em;
color: white;
outline: 2px solid silver;
}
div>div {
width: 220px;
width: -ms-flex;
width: -moz-flex;
width: -o-flex;
width: -webkit-flex;
margin: 1em;
height: 100px;
background-color: #b200ff;
font-family: sans-serif;
text-align: center;
line-height: 100px;
font-size: xx-large;
}
</style>
</head>
<body>
<div>
<div>Polans</div>
<div>Procyon</div>
<div>Rigel</div>
<div>Vega</div>
<div>Orion</div>
<div>Pegasus</div>
<div>Perseus</div>
<div>Pisces</div>
<div>Gold</div>
<div>Silver</div>
<div>Platinum</div>
<div>Chromium</div>
</div>
</body>
</html>
What should I put/replace in my code to make all the boxes fit? Also please tell me if I have unnecessary codes in my code so that I can remove them.