SO - 21648339

container not responsive when the window resizes - leaving white space on the right

by Radu Chelariu

HTML

<body>
    <div id="content">
        <div class="grid3">
            <article class="bucket" >
                <a href="#">
                    <div class="img-overlay"><h3>Monogram</h3></div>
                    <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
                </a>
            </article>

            <article class="bucket">
                <a href="#">
                    <div class="img-overlay"><h3>Gastalt Composition</h3></div>
                    <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
                </a>
            </article>

            <article class="bucket">
                <a href="#">
                    <div class="img-overlay"><h3>The Red Thread - A Visual Book</h3></div>
                    <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
                </a>
            </article>

            <article class="bucket">
                <a href="#">
                    <div class="img-overlay"><h3>Typographic Hierarchy</h3></div>
                    <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
                </a>
            </article>

            <article class="bucket">
                <a href="#">
                    <div class="img-overlay"><h3>Living in Two Spaces</h3></div>
                    <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
                </a>
            </article>  
        </div>
    </div>
</body>

CSS

@charset "UTF-8";

*{  
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	margin:0; }

html, body{
	background: #fff;
	height: 100%;
	margin: 0;
	padding: 0; }

	#content{
	    background: tan;
		float: left;
        padding: 0 3%;
        width: 100%; }

		a{ text-decoration: none; }

		.bucket{
			float: left;
			margin: 2% 3%;
			position: relative;
		    width: 27.3%; }

			.grid3 .bucket:nth-of-type(3n+1){  clear: left; }

			.bucket img{ 
				height: auto;
				width: 100%; }

.img-overlay{
	background-color: rgba(0,0,0,0.6);
	bottom: 0px;
	top: 0px;
	opacity: 0;
	overflow:hidden;
	position: absolute;
	width: 100%;
	z-index: 1000;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s; }

	.img-overlay h3{
		opacity: 1;
		display: inline-block;
		margin: auto;
		height: 20px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left:0;
		color: rgba(255,254,254,1.00);
		text-align: center;
		vertical-align: middle; }

	.bucket:hover .img-overlay{ opacity: 1; }


/* Responsive */

@media screen and (max-width:740px){

    .bucket{ 
        width: 44%; }
    
	.grid3 .bucket:nth-of-type(3n+1){ clear: none; }
	.grid3 .bucket:nth-of-type(2n+1){ clear: left; }
}