html - H1 Bottom Border Underline -

i having issue trying underline h1 border-bottom, extends behind picture (to left). underline extend end of page. here code:

html: <div id="content"> <img src="http://imageshack.us..."/>     <h1>about me</h1         <p>info me....</p>     <h2>contact info</h2>         <p>phone:my number</p>         <p>email: email</p> </div> 

css:

#content  {     padding: 5px 10px 5px 0px;     margin: 10px 10px 10px 0px; }  #content img {     float: left;     margin: 0px 10px 10px 0px; }  #content h1 {     font-size: 26px;     margin: 15px 0px 5px 0px;     border-bottom: 5px solid black; } 

note: novice coder - if not possible or there other ways let me know!

the reason happening because haven't set width on h1. naturally going extend entire page width. solve this, add width property, , should go. code looks now

#content h1 {   font-size: 26px;   margin: 15px 0px 5px 0px;   border-bottom: 5px solid black;   width:200px; /*change whatever value want*/ } 

fiddle

as others have stated, can use inline-block on h1. put on same line h1, since p below it, not case, because p elements natrually have css of display:block;.

fiddle