How can I arrange 2 boxes in one line and the other 2 in the next line? Currently, they are all showing up on separate lines. Can anyone provide a solution to this issue?
body{
background:#f4f4f4;
color:#555;
font-family:Bahnschrift SemiCondensed;
font-size:16px;
font-weight:normal;
margin:0;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#operator {
padding:0;
text-decoration:none;
}
.op-box {
border-radius: 15px / 50px;
background:#ccc;
margin:12px;
position: relative;
height:155px;
width: 50%;
border:green 1px solid ;
display:inline-block;
}
.op-box a {
color:#000;
text-decoration:none;
position: absolute;
padding:70px 0px;
text-align:center;
width: 100%;
height: 100%;
}!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<h4>list</h4>
<ul id="operator">
<li><div class="op-box"><a href="#">list1</a></div></li>
<li><div class="op-box"><a href="#">list2</a></div></li>
<li><div class="op-box"><a href="#">list3</a></div></li>
<li><div class="op-box"><a href="#">list4</a></div></li>
</ul>
</div>
<div style="margin-top:400px"></div>
</body>
</html>I am struggling to get the layout of my boxes right, with 2 in one row and 2 in the next. Any help would be appreciated. Thank you.