Aligning background image for a div element in css

So I am new to css,and have been trying to develop a basic website as a college project,but I am having problems aligning the background image for a div with class name mainhead,it leaves a whitespace at left of the screen. Whatever width I set it to,there is a blank white space on the left.

I dont know what to do,I havent set any padding or margins and also specified left: 0px,but no joy. The class I am having problem with is the mainhead class Here is the code,please help!

.loginbox
{
    position: fixed;
    top: 0px;
    margin: 0px;
    left: 0px;
    font-weight: bold;
    background-color: #2C2C2C;
    text-align: right;
    width: 1370px;
    height: 40px;
}
.loginbut
{
    background-color: #2C2C2C;
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    font-size: 100%;
    color: #c9c9c9;
    text-align: right;
    margin-right: 50px;
    margin-top: 5px;
    border-color: #2C2C2C;
    border-radius: 8px;
    top: 10px;
    text-decoration: none;
    outline: none !important;
}
.loginbut:hover
{
    background-color: #000000;
}
.mainhead
{
    background-image: url("grey.jpg");
    background-repeat: none;
    border: 1px solid black;
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    top: 40px;
    width: 1360px;
    height: 170px;
    color: #c9c9c9;
    text-align: center;
}
.mainhead h1
{
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    font-size: 300%;
}