Confusing title, but I couldn't find a better way to explain it. The issue I'm facing is having 3 boxes in a row with only a 1px border on each side, but for some reason, the far right one has a 2px border. How can I fix this?
Take a look at the code:
#content {
width: 1016px;
min-height: 664px;
height: auto;
border: 1px solid #232323;
background-color: #12100e;
float: left;
padding: 0px;
}
#imagebox {
Width: 338px;
height: 221px;
padding-right: 0px;
padding-left: 0px;
border-right: 1px solid #232323;
border-bottom: 1px solid #232323;
}
<html>
<head>
<link rel="StyleSheet" href="Main.css" type="text/css">
<title></title>
</head>
<body>
<div id="mainbody">
<div id="menu"></div>
<div id="content">
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
</div>
</div>
</body>
</html>