HTML + CSS strange DIV error

I'm relatively new to HTML, and I'm having minor issues with getting two divs to line up. The first div is the top box, and the second div is the video box underneath it. Both are the same dimensions in width, but their height differs. Whenever I place the video box div inside the top box div, the video box div is shifted 5px to the right for no apparent reason. I can fix it by using margins, but I've been googling all day and can't find out why it's happening. Here's my HTML code, and the CSS code.

.smoothbox
    {
        background-color: darkseagreen;
        border-style: solid;
        border-width: 5px;
        border-radius: 10px;
        border-color: black;
    }
    
    #topbox
    {
        width: 800px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    #video
    {
        width: 800px;
        height: 600px;
        margin-top: 200px;
    }

    <html>
        <head>
            <title>Camagru</title>
            <link rel="stylesheet" href="main.css">
        </head>
        <body>
            <div id="topbox" class="smoothbox">
                <video id="video" class="smoothbox" autoplay></video>
                <button id="snap">Snap Photo</button>
                <canvas id="canvas" width="800" height="600"></canvas>
                <script>
                    //Stream Video
                    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                    {
                        navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                        video.src = window.URL.createObjectURL(stream);
                        video.play();
                        });
                    }
                    //Snap Photo
                    var canvas = document.getElementById('canvas');
                    var context = canvas.getContext('2d');
                    var video = document.getElementById('video');
                
                    document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
                </script>
            </div>
        </body>
    </html>

All help is greatly appreciated!

Solution

the problem is that you have a border of 5px on .smoothbox so both topbox and video get a border of 5px

so that's why the green area of the video shifts 5px from left because you add 5px to the left ( top bottom and right ) of the video container

without setting box-sizing:border-box , both divs will exceede their widths of 800px and will have a width of 810px.

see example below with box-sizing: border-box; to see more clearly what's going on

.smoothbox
{
    background-color: darkseagreen;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
    border-color: black;

}

#topbox
{
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#video
{
    width: 800px;
    height: 600px;
    margin-top: 200px;
      box-sizing:border-box;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topbox" class="smoothbox">
            <video id="video" class="smoothbox" autoplay></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="800" height="600"></canvas>
            <script>
                //Stream Video
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                {
                    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    });
                }
                //Snap Photo
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');

                document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
            </script>
        </div>

you can use negative margin ( margin-left:-5px ) and so the two divs will be aligned. see snippet

.smoothbox
{
    background-color: darkseagreen;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
    border-color: black;
}

#topbox
{
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#video
{
    width: 800px;
    height: 600px;
    margin-top: 200px;
    margin-left: -5px;
    margin-right: auto;
}

<div id="topbox" class="smoothbox">
            <video id="video" class="smoothbox" autoplay></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="800" height="600"></canvas>
            <script>
                //Stream Video
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                {
                    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    });
                }
                //Snap Photo
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');

                document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
            </script>
        </div>

but i suggest you change the html structure and make them siblings.

and use box-sizing:border-box if you add border because if not, instead of occupying 800px; the div with border:5px will occupy 810px instead