Gradient affecting div's width & height

by jklm313

HTML

<div class="fire"> 
        <h1>badaboom</h1> 
        <p>---The story so far---</p> 
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <h2>twitter <span class="amp">&</span> deviantart</h2>
        <div class="footer">By the power vested in me by Arkham Asylum, I now pronounce you Batman & Robin.</div>
    </div>

    <div class="earth">
        <h3>interface design</h3>
    </div>

CSS

body {
    margin: 0;
    padding: 0;
    color: #111;
}

h1, h2, h3, h4, h5, h6 {    
    font-family: league gothic;
    font-weight: normal;
    }

a {
    text-decoration: none;
    color: white;
}

img {
    border-style: none;
}

::-moz-selection{
    background: #222;
    color: #fffc27;
} 

::selection {
    background: #222;
    color: #fffc27;
}

body {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,#141414), color-stop(0%,#3a3a3a));
    filter: progid:DXImageTransform.Microsoft.gradient( endColorstr='#141414', startColorstr='#3a3a3a',GradientType=0 );
    background: -moz-linear-gradient(bottom,  #141414,  #3a3a3a);
    min-width: 744px;
    padding-left: 280px;
    position: relative
}

.fire {
    background: #fffc27;
    width: 280px;
     padding: 13px 30px 0;
     box-shadow: 0 0 20px #000;
     -webkit-box-shadow: 0 0 20px #000;
     -moz-box-shadow: 0 0 20px #000;
     position: relative;
     float: left;
     left:-280px;
     z-index: 999;
}

h1, h2, h3 {
    text-transform: uppercase;
    text-align:center;
}

h1 {
    font-size: 4em;
}

p {
    font-family: linux libertine o, georgia;
    font-style: italic;
    font-size: 1em;
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

h2 {
    font-size: 2.2em;
}

h2::before {
    content: "come follow me on:";
    font-size: .4em;
    display: block;
    margin: 20px 0 -8px; 
}

.amp {
    display: block;
    font-size: .5em;
    margin: -5px 0;
}

.footer {
    background: #141414;
    position: relative;
    bottom: 0px;
    left: -30px;
    width: 280px;
    color: #fff;
    padding: 20px 30px;
    font-family: tahoma, arial;
    font-size: .8em;
}

.earth {
    padding: 8px 47px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,#222222), color-stop(0%,#3a3a3a));
    filter: progid:DXImageTransform.Microsoft.gradient( endColorstr='#222222', startColorstr='#3a3a3a',GradientType=0 );
    background:...