I want to extend the h1 tag

Right now, the H1 takes up as much space as it can. If you want it to take up ALL the space (touching the borders of the #leftcolumn), then you'll have to remove the left- and right padding of the #leftcolumn, and apply a left/right margin on the .left-box.

Currently #leftcolumn has padding of 10px, thats why H1 is not touching edges. Here is the modified code:

#leftcolumn {
     color: #333;
     border: 1px solid #ccc;
    background:#F6F0E0;
    margin: 0px 5px 5px 0px;
    padding: 10px 0px;
    height: 350px;
    width: 195px;
    float: left;
}
 
#leftcolumn h1 {
        margin: 10px 0 10px 0; 
        padding: 5px 5px 5px 8px;
        font-size: 105%;
        color: #FFF;
        text-transform: uppercase; 
        background: #333; 
        letter-spacing: 1px;    
}
 
#leftcolumn .left-box {
        border: 1px solid #EBEBEB;
        margin: 0 10px 5px 10px;
        background: #FFF;
}

and html code

<div id="leftcolumn">
    <h1>Login</h1>
     <div class="left-box">
 
      </div>
</div>

prasad,
[not eligible for sig link ~gt]

Because presumably you want everything in the column to be moved away from the edges of the box except the heading. So instead give the h1 negative top, left, right margins of -10px to counteract the padding of the container, i.e. #leftcolumn h1 { margin: -10px -10px 10px }