I am a new css programmer and there is a very annoying problem in my code. when I put the grey bars in they are not touching the left side of the screen they touch the right side but not the left side and I do not know why there is nothing in my code that is stopping them so I do not know why it would be doing that please help me fix it thanks! (the big white space in the middle is supposed to be there it is for a picture.)

```
<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link href="https://fonts.googleapis.com/css?family=Oswald"      rel="stylesheet"> 

<style type="text/css">

    #white{
        color:white;

    }

    .large {
        font-size:300%;
    }

    #green {
        color:black;
    }

    .underline {
        text-decoration:underline;
        }

        .bold {
            font-weight:bold;
        }

        .picture{
        position: absolute;
        top: 45px;
        right: 0;
        width: 1870px;
        height: 10px;

        }

        .greybox {
        background-color:#a5a5a5;
        position: absolute;
        top: 380px;
        right: 0;
        width: 1870px;
        height: 10px;
        border: 3px solid #a5a5a5;

        }

        .connect {
        background-color:#6b6b6b;
        position: absolute;
        top: 340px;
        right: 0;
        width: 1870px;
        height: 40px;
        border: 3px solid #6b6b6b;

        }

        .top {
         top:10px;
        width: 1870px;
        height:700px;
        z-index:2;
        text-align: center;

        }

        .bottom {
            background-color:#0a0a0a;
            width: 1600px;
            height:200px;
            text-align: center;

        }

        .purplebox {
            background-color:#6b6b6b;
            position: absolute;
            top: 0px;
            right: 0;
            width: 1870px;
            height: 40px;
            border: 3px solid #6b6b6b;

            }

        .greenbox {
        top:0px;
        width: 1870px;
        height: 500px;
        z-index:2;
        text-align: center;
        margin:150px 100px 30px 10px;
        float:center;
        font-family: 'Oswald', sans-serif;

        }

        }

        p {
            padding:0;
            margin:0;
        }

</style>  
</head>

<body>

<div class="greybox">

</div>

<div class="purplebox">

    <p class="large"></p>

</div>

<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870"> 
</div>

<div class="connect">
<p> Connect with me! </p>

</div>

<div class="top">

    <p id="green" class="large">idfk</p>

    </div>

</div>

<div class="greenbox">

    <p id="green" class="large">idfk</p>

    </div>

    <div class="greenbox">

    <p id="green" class="large">idfk</p>

    </div>

    <div class="bottom">

    <p id="white" class="large">Connect With me!</p>

    </div>

```