How to remove padding to the right when window is resized

Hi Guys,

Is there any one here can help me how to fix or removed a padding in the right side when the window is re-sized or the screen is below 900px i think?
Please see the attached file for the screenshot
here is the css code for that footer
footer{
background-color:#181818;
height:32px;
margin:0;
padding:0;
}

Please help me to figure out this problem. Thank you in advance :slight_smile:

Kind regards,
fritzoi

Hi fritzoi . Welcome to the forums. :slight_smile:

It’s hard to tell from just an image, but often you get this effect if you haven’t set a min-width on the element (so give the footer a min-width equal to the width of the container). If that doesn’t help, post a link.

How is the space in that picture interfering with the “look” that you would like to have?

Normally, a footer is a block that extends completely across the bottom of the page. In your code, the footer has been given a height of 32px and no padding, so one would expect the block to be 32px tall and stretch the full width of the page. Your picture shows the footer behaving the way we would expect it to.

What do you want to see?

We really need a link to the page.

Hi Guys,

This is not yet live in the internet, I just created this in my desktop computer.

Anyway here are the codes.
index.html


<!DOCTYPE html>
<html>
<head>
	<title>Limo vip bus</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	
</head>
<body>
	<section class="globalwidth">
		<header >
			<a href="#"><img title="" alt="" src="images/ts-limo-vip-bus-logo.png"></a>
			<nav class="right">
				<ul>
					<li><a href="#">Home </a></li>
					<li><a href="#">About </a></li>
					<li><a href="#">Rates</a></li>
					<li><a href="#">Gallery</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>
	
		<section class="slider">
			<div>
				<img src="images/slider.jpg"/>
			</div>
			<div class="textbg clr">
				<div class="left left-pad">
					<h2>Want to book the VIP Bus</br>
					for your next party?</h2>
				</div>
				<div class="right right-pad">
					<p>CALL US KNOW!</p>
					<h3>123-456-7890</h3>
				</div>
			</div>
		</section>
		<section>
			<div class="left artcle-left">
				<h1 class="yellow">Limo VIP bus services in Sarasota</h1>
				<p>
					Providing ecxeptional service to 6 counties in West/Central Florida which include: Hillsborough, Manatee, Pasco, Pinellas, Polk, Sarasota Counties, and serving Bradenton-Clearwater-Lakeland-Port Richey-Sarasota-St.Pete-Tampa Areas. We specialize in Bachelor/Bachelorette parties but we also provide services for Weddings, Proms, Theme Parks, Corporate Birthday, Night Out, Tailgate and Casino Outings as well as other types of events.
				</p>
				<p>
				Limo VIP Bus is the official bus for The Penthouse Club (Gentlemans's Club and Steakhouse) as well as The Pink Pony (Gentleman's Club) of Tampa, Florida.
				</p>
				<p>
				We bring you to your choice of destination and straight to the VIP section. Be with people who you would love to party with without the hassle of jumping from one place to another. Best of all – get to enjoy a safe, convenient and unique party all-night in a luxury bus meant only for VIPs.
				</p>
				<p>
				Experience a party bus unlike any other. Board the TS Limo VIP Bus. Contact us today!
				</p>
			</div>
			<div class="left artcle-right">
				<h2 class="yellow">What to expect inside?</h2>
				<ul>
					<li>Spacious bus that can accommodate up to 24 guests</li>
					<li>High back seats for your best comfort</li>
					<li>A 37-inch flat screen TV</li>
					<li>High-pumping advanced surround sound audio system with subwoofers</li>
					<li>iPod dock to play your very own music collection</li>
					<li>DVD and CD players</li>
					<li>Built-in bars with two coolers – each can carry 36 cans</li>
					<li>Thirty built-in cup holders</li>
					<li>Fantastic accent lighting to get you in the mood</li>
					<li>Stripper pole (can be removed upon request)</li>
				</ul>
				<h2 class="yellow">Why Choose Limo VIP Bus?</h2>
				<ul>
					<li>Regulated by the Florida Department of Transportation</li>
					<li>Alcohol only allowed if ALL passengers are over 21 years old</li>
					<li>Carries limo bus commercial insurance for the utmost safety of the passengers</li>
				</ul>
			</div>
		</section>
		
	</section>
	<div class="clr"></div>
	<footer>
		<div>
		<p>© Copyright 2013 <span>Limo VIP Bus</span>. All Right Reserved</p>
		</div>
	</footer>
</body>
</html>

css


body{
background:url("images/slider-bg.gif")no-repeat scroll center top #212020;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
padding:0;
margin:0;
vertical-align: baseline
outline: 0;
}

.globalwidth{
width:1024px;
margin:0 auto;
}
.right{
float:right;
}
.left{
float:left;
}
.clr{
clear:both;
}
h1 , h2{
font-weight:normal;
}

header{
height:119px;
}

nav {
width:550px;
height:40px;
/*border:1px solid #fff;*/
margin-top:59px;
}
nav ul{
list-style:none;
display:inline-block;
}
nav ul li{
float:left;
/*border:1px solid #fff;*/
margin:none;
border-right:2px dotted #fff;

}
nav ul li:last-child{
border:none;
}

nav ul li a{
padding:0px 18px;
text-decoration:none;
color:#fff;
}
nav a:hover{
color:#bea605;
}

.slider{
height:380px;
}
.textbg{
background:url("images/text-bg.jpg")no-repeat;
width:1023px;
height:115px;
margin-top:-5px;
}
.left-pad{
padding-left:18px;
margin-top: -12px;
}
.right-pad{
padding-right:18px;
}
.right-pad p{
	font-size: 26px;
    font-weight: 700;
    margin-right: 3px;
    margin-top: 18px;
    text-align: right;
}
.right-pad h3{
	color: #bea605;
    font-size: 60px;
    font-weight: bold;
    margin-top: -38px;
}
.textbg h2{
font-size:34px;
}

.yellow{
color:#bea605;
font-size:27px;
margin: 10px 0 -9px;
}
.artcle-left{
width:518px;
}
.artcle-right{
width:451px;
 margin: -39px 0 0 48px;
}
.artcle-right  ul li{
list-style-image:url("images/check.png");
margin-bottom:5px;
}
footer{
background-color:#181818;
height:32px;
margin:0;
padding:0;
}
footer span{
color:#bea605;
}

/*@media (max-width:760px){
	footer{
		width:autho;
		padding:0px;
		margin:0px;
		float:none;
	}
}*/

@ralph.m Your awesome :smiley:
adding min-width in the element is working :slight_smile:

Thank you so much guys for helping me, I really appreciate your help :smiley:

Would you guys mind helping me see what the problem is and the fix? I’m still not clear about what’s supposed to happen. I hate to be shallow. :confused:

I’m glad the solution worked, as I was actually thinking of this basic situation. Run this code in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
.outer {background: #30353b;}
.inner {color: white; width: 800px; margin: 0 auto;}
</style>
	
</head>
<body>

<div class="outer">
	<div class="inner">
	<p>Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. </p>
	</div>
</div>

</body>
</html>

Narrow your browser to less than 800px, so that there is a scroll bar at the bottom. Then scroll right. You see that the .outer bg color has disappeared where it was hidden. A fix for that is to add:

.outer {min-width: 800px;}

Thanks, Ralph, very much. A perfect explanation and demo.

Great, no probs, Ron. I whipped it up as I was being hurried out the door by the better half. :smiley:

It’s amazing how many sites suffer from this problem, though, such that the background color of elements is wiped if the browser window is narrowed too much and sideways scrolling is needed.