Dividing a page into two vertical and identical sections with border

I'm currently trying to divide a page into two identical and vertical sections with one border on either side. The problem is that I have two sections with width:49vw; and the size of the border is 1vw which equals to 100vw but the sections jumps underneath one another instead of being inline. I have set up a JSFiddle so its easier to show. Here's the code that goes with the JSFiddle.

.section1{
    background-color:#11181e;
    width:49vw;
    float:left;
    height:100vh;
    border-right: 1vw solid #F5E5D6; 
    margin:0;
    padding:0;  
}
.section2{
    background-color:#f1c40f;
    width:49vw;
    float:left;
    height:100vh;
    border-left: 1vw solid #000;  
    margin:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/reset.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/styles.css" media="screen" type="text/css" />
</head>
<body>
<!--SECTION 1-->
    <div class="section1">
        <p>2D</p>
    </div>
<!--SECTION 2-->
    <div class="section2">
        <p>3D</p>
    </div>
</body>
</html>

Here is the link: http://jsfiddle.net/VfTYs/4/

Solution

Use width: 50%; and box-sizing: border-box on .section1 and .section2.

body{
	color:#fff;
	font-size:100pt;
}
.section1{
	background-color:#11181e;
	width:50%;
	float:left;
	height:100vh;
	border-right: 1vw solid #F5E5D6; 
    box-sizing: border-box;
    margin:0;
    padding:0;	
}
.section2{
	background-color:#f1c40f;
	width:50%;
	float:left;
	height:100vh;
	margin:0;
	padding:0;
  box-sizing: border-box;
}

<div class="section1">
2d
</div>
<div class="section2">
3d
</div>