Empty space with 100% webpage <p>Someone noticed me today that my webpage has a empty space on the right on smaller screens. I am working hard to find the problem but I haven't found it yet.</p> <p><img src="https://i.stack.imgur.com/zXPhq.png" alt="enter image description here"></p> <p>As you see, there is a grey empty space next to my website. With the width set to 100% and the minimal width set to 1020px.</p> <p>On bigger screens, the problem resolves itself and the website has the correct width of 100%.</p> <p>Does someone recall this problem, or know how to solve it?</p> <p><strong>Website viewable on <a href="http://tinyurl.com/c2ohcpu" rel="nofollow noreferrer">http://tinyurl.com/c2ohcpu</a></strong></p> <p><strong>CSS CODE</strong></p> <pre><code>html,body { margin:0px; width: 100%; min-width:1020px; background-color: #eaeeef; padding: 0px; font-family: Arial; font-size: 12px; color: #7f8386; } img { border: 0; } #f-container { width: 100%; height: auto; } #h-container { width: 100%; } #container { width: 1020px; height: auto; margin: 0 auto; padding-top: 10px; margin-top: -1px; background-image: url('../images/container_bg.png'); background-repeat: repeat-y; border: 1px solid #d4d6d7; margin-bottom: 10px; } #header { width: 100%; height: 59px; background-image: url('../images/header-repeat.png'); background-repeat: repeat-x; min-width: 1020px; z-index: 10000; float: left; } #header #h-container { width: 1020px; height: 59px; margin: 0 auto; } #header #logo-container { width: 414px; height: 40px; margin-left: 10px; border: 0; float: left; } #header h1 { margin:0; padding:0; } #header #logo-container #logo { width: 414px; height: 40px; } #header #topMenu { width: 580px; height: 50px; margin-right: 10px; float: right; } #header #topMenu ul.menu { height: 50px; margin: 0; padding: 0; float: right; } #header #topMenu ul.menu li { list-style-type: none; float: left; padding-left: 10px; padding-right: 10px; height: 50px; } #header #topMenu ul.menu li:hover, #header #topMenu ul.menu li.current { background-image: url('../images/menu_active.png'); background-repeat: no-repeat; background-position: center; } #header #topMenu ul.menu li a { text-decoration: none; display: block; height: 50px; } /* Home */ #header #topMenu ul.menu .item-102 a { background-image: url('../images/menu/home.png'); width: 58px; } /* Nieuws */ #header #topMenu ul.menu .item-103 a { background-image: url('../images/menu/nieuws.png'); width: 71px; } /* Diensten */ #header #topMenu ul.menu .item-104 a { background-image: url('../images/menu/diensten.png'); width: 80px; } /* Portfolio */ #header #topMenu ul.menu .item-105 a { background-image: url('../images/menu/portfolio.png'); width: 81px; } /* Contact */ #header #topMenu ul.menu .item-106 a { background-image: url('../images/menu/contact.png'); width: 75px; } /* Hosting */ #header #topMenu ul.menu .item-115 a { background-image: url('../images/menu/hosting.png'); width: 72px; } #content-left { width: 750px; height: auto; float: left; padding: 10px; } p { padding: 0px; margin: 0px; } #content-left h2.title { color: #33393e; font-size: 13pt; width: 100%; } #content-left h2 a { display: block; color: #33393e; text-decoration: none; font-size: 13pt; } #content-left ul.actions{ display: none; } #content-left .item-block { width: 100%; height: auto; border-bottom: 1px dashed #d4d6d7; padding-bottom: 20px; } #content-left .item-block .published { width: 745px; background: #CCEBF5; color: black; padding-top: 3px; padding-left: 5px; height: 17px; margin-bottom: 5px; } #content-right { width: 230px; height: auto; float: right; padding: 10px; } #content-right h2.title { color: #33393e; font-size: 13pt; width: 100%; } #content-right h2 a { display: block; color: #33393e; text-decoration: none; font-size: 13pt; } h2 a:hover { font-weight: bold; cursor: pointer; } #footer { width: 100%; text-align: center; margin-top: 5px; height: auto; } #content-right .item-block { width: 100%; height: auto; border-bottom: 1px dashed #d4d6d7; padding-bottom: 20px; } a { color: #0099cc; text-decoration: none; font-weight: bold; } a:hover { font-weight: normal; } .portfolio-image { margin: 0 auto; width: 700px; height: auto; display: block; } </code></pre> <p><strong>HTML CODE</strong></p> <pre><code>&lt;?xml version="1.0" encoding="utf-8?&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl" dir="ltr" &gt; &lt;head&gt; &lt;link rel="stylesheet" href="/templates/hiddenhidden/css/template.css" /&gt; &lt;link href="/templates/hiddenhidden/css/uni-form.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/templates/hiddenhidden/css/default.uni-form.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/templates/hiddenhidden/jqueryui/css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/templates/hiddenhidden/css/screen.css" rel="stylesheet" type="text/css" /&gt; &lt;link rel="stylesheet" type="text/css" href="/templates/hiddenhidden/css/jquery.lightbox-0.5.css" media="screen" /&gt; &lt;link rel="shortcut icon" href="/templates/hiddenhidden/images/favicon.ico" /&gt; &lt;script type="text/javascript" src="/templates/hiddenhidden/js/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/templates/hiddenhidden/js/uni-form.jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/templates/hiddenhidden/js/uni-form-validation.jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/templates/hiddenhidden/js/jquery.lightbox-0.5.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/templates/hiddenhidden/jqueryui/js/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/templates/hiddenhidden/js/easySlider1.7.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function () { $('a.lightbox').lightBox({ imageLoading:'/templates/hiddenhidden/images/lightbox-ico-loading.gif', imageBtnPrev:'/templates/hiddenhidden/images/lightbox-btn-prev.gif', imageBtnNext:'/templates/hiddenhidden/images/lightbox-btn-next.gif', imageBtnClose:'/templates/hiddenhidden/images/lightbox-btn-close.gif', imageBlank:'/templates/hiddenhidden/images/lightbox-blank.gif' }); }); &lt;/script&gt; &lt;base href="http://hiddenhidden.nl/" /&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; &lt;meta name="keywords" content="" /&gt; &lt;meta name="description" content="" /&gt; &lt;meta name="generator" content="Joomla! - Open Source Content Management" /&gt; &lt;title&gt;hidden hidden&lt;/title&gt; &lt;link href="/?format=feed&amp;amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /&gt; &lt;link href="/?format=feed&amp;amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /&gt; &lt;link rel="stylesheet" href="/modules/mod_portfolio/portfolio.css" type="text/css" /&gt; &lt;script src="/media/system/js/mootools-core.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/media/system/js/core.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/media/system/js/caption.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; window.addEvent('load', function() { new JCaption('img.caption'); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; var _gaq = _gaq || []; _gaq.push(['_setAccount', '']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="fb-root"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt;(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));&lt;/script&gt; &lt;div id="f-container"&gt; &lt;div id="header"&gt; &lt;div id="h-container"&gt; &lt;h1&gt; &lt;a href="/" id="logo-container" title="hidden hidden"&gt; &lt;img src="/templates/hiddenhidden/images/logo_with_slogan.png" id="logo" alt="hidden hidden" /&gt; &lt;/a&gt; &lt;/h1&gt; &lt;div id="topMenu"&gt; &lt;ul class="menu"&gt; &lt;li class="item-102 current active"&gt;&lt;a href="/" &gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="item-103"&gt;&lt;a href="/nieuws" &gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="item-104"&gt;&lt;a href="/diensten" &gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="item-115"&gt;&lt;a href="/hosting" &gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="item-105"&gt;&lt;a href="/portfolio" &gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="item-106"&gt;&lt;a href="/contact" &gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="container"&gt; &lt;div id="content-left"&gt; &lt;div id="system-message-container"&gt; &lt;/div&gt; &lt;div class="blog-featured"&gt; &lt;div class="items-leading"&gt; &lt;div class="leading-0"&gt; &lt;h2 class="title"&gt; &lt;a href="/7-home/1-welkom-op-hidden-hidden"&gt; Welkom op hidden hidden!&lt;/a&gt; &lt;/h2&gt; &lt;!-- BEGIN --&gt; &lt;div class="item-block"&gt; &lt;div class="item-text"&gt; &lt;div class="item-separator"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;div class="item-bottom"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;h2 class="title"&gt;Onze Portfolio&lt;/h2&gt; &lt;div class="item-block"&gt; &lt;div class="item-text"&gt; &lt;div id="portfolio-slider" &gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;ul class="ui-tabs-nav"&gt; &lt;/ul&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; jQuery(function() { jQuery("#portfolio-slider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); });&lt;/script&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item-bottom"&gt;&lt;/div&gt; &lt;div id="footer"&gt; Copyright&amp;copy; 2010 - 2012 hidden hidden. Alle rechten voorbehouden. | &lt;a href="/component/xmap/?view=html&amp;amp;id=2"&gt;Sitemap&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="content-right"&gt; &lt;h2 class="title"&gt;Contact&lt;/h2&gt; &lt;div class="item-block"&gt; &lt;div class="item-text"&gt; &lt;div class="custom" &gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item-bottom"&gt;&lt;/div&gt; &lt;h2 class="title"&gt;Offerte aanvragen&lt;/h2&gt; &lt;div class="item-block"&gt; &lt;div class="item-text"&gt; &lt;div class="custom" &gt; &lt;p&gt;Offerte aanvragen? Dat kan via ons &lt;a href="/contact/?view=form"&gt;contactformulier&lt;/a&gt;.&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item-bottom"&gt;&lt;/div&gt; &lt;h2 class="title"&gt;Sociaal&lt;/h2&gt; &lt;div class="item-block"&gt; &lt;div class="item-text"&gt; &lt;div id="facebook-container"&gt;&lt;/div&gt;&lt;br /&gt; &lt;a href="http://facebook.com/hiddenhidden/" title="hidden hidden op Facebook"&gt; &lt;img src="/modules/mod_social/networks/facebook.png" style="border: 0;" alt="hidden hidden op Facebook" /&gt; &lt;/a&gt; &lt;a href="http://twitter.com/hiddenwebsolution" title="hidden hidden op Twitter"&gt; &lt;img src="/modules/mod_social/networks/twitter.png" style="border: 0;" alt="hidden hidden op Twitter" /&gt; &lt;/a&gt; &lt;a href="http://linkedin.com/company/hidden-hidden" title="hidden hidden op Linkedin"&gt; &lt;img src="/modules/mod_social/networks/linkedin.png" style="border: 0;" alt="hidden hidden op Linkedin" /&gt; &lt;/a&gt; &lt;script type="text/javascript" src="/modules/mod_social/mod_social.js"&gt;&lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item-bottom"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>