Very new to HTML/CSS/JavaScript/JQuery, and I need some help. I'm trying to get my two divs that are nested inside another div to stay next to one another and scale with the screen. So I used width: 50%;, but I also need a border around the two and that seems to increase their width making the right-most div move down. I tried the table/table-cells method, and other solutions that yielded no results, so now I'm posting my source code, and if anyone can help it would be much appreciated.

CSS:

```
body{
  background-color: black;;
}

#header{
  display: table;
  width:100%;
  height:30%;
  background-color: white;
  overflow: hidden;
}

.button1{
  display: table-cell;
  width: 50%;
  height: auto;
  background-color: red;
  border-radius: 120px 0px 0px 120px / 120px 0px 0px 120px;
  border-color: green;
  border-width: thin;
  border-collapse:collapse;
  border-style: bold;
  border-right-style: none;
  float:left;
  text-align: center;
  vertical-align: middle;
}

.button2{
  display: table-cell;
  width: 50%;
  height: auto;
  background-color: blue;
  border-radius: 0px 120px 120px 0px / 0px 120px 120px 0px;
  border-color: red;
  border-width: thin;;
  border-style: solid;
  border-left-style: none;
  float: right;
  text-align: center;
  vertical-align: middle;
}

```

HTML:

```
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <title></title>
  <script src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="header">
  <div class="button1">Button1</div><div class="button2">Button2</div>
</div>
</body>

</html>

```