I am working on a site. I want to make the image on the header equal to the width of the page but I am unable to do so. When I increase the width of the page, it does not increase its width and hides the overflow. Please help me out.
Code
<!DOCTYPE html>
<html id="index-page" class="canvas canvastext no-touch draganddrop rgba borderradius boxshadow textshadow opacity fontface video audio localstorage mobile-768 mozilla wordpress-section w-900 lt-960 js gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius no-cssreflections csstransforms csstransitions fontface not-ie domloaded" lang="en-US" dir="ltr">
<head>
<body id="home" class="home blog">
<div id="wrap" style="">
<header role="banner">
<section id="site-logo">
<a href="http://ackmaster.com/wordpress">
<img width="1200px" alt="Ackmaster.com" src="http://ackmaster.com/wordpress/wp-content/uploads/2011/12/WebSiteMain2.jpg">
</a>
</section>
<section id="nav-wrap">
</header>
<div id="content" role="main">
<footer style="min-height: 0; padding-top: 0;" role="contentinfo">
</div>
<script>
<div id="fancybox-tmp"></div>
<div id="fancybox-loading">
<div id="fancybox-overlay"></div>
<div id="fancybox-wrap">
</body>
</html>
A child node can only be as large as its parent. Make sure the parent node is large enough to hold your child node. The div is only 900px but the image is 1200px. This is the problem.