HELP! ramdon white spaces

HTML & CSS
#1

I know this is not php, but i coundnt find anywhere where i can help. I have this ramdon white spaces in between my elements and i dont know how to get rid of them. I tried margin and padding 0, and everything on the internet that gave answers.

/*HTML

[php]<!doctype html>

Stoneham Memorial Church

Clock Icon SERVICES

Saturday 9:45am | Wednesday 7pm

Location Icon LOCATION

29 Maple Street | Stoneham, MA 02180

WELCOME TO STONEHAM MEMORIAL SEVENTH-DAY ADVENTIST CHURCH

No alia malis eruditi his, eu eos homero delenit inciderint. Bonorum suavitate ad vix, euismod constituam eum ex, ex melius perpetua nam. Vix falli oporteat sadipscing cu, doming impedit ut eum. Sit id nonumy legendos scribentur, eum at soleat delectus invenire.

New Here?
HEW HERE?

Lorem ipsum dolor sit amet, magna autem voluptatum mel ei, purto aperiam interesset vis no.

JOIN US
New Here?
WHO WE ARE

Lorem ipsum dolor sit amet, magna autem voluptatum mel ei, purto aperiam interesset vis no.

LEARN MORE
New Here?
ONLINE GIVING

Lorem ipsum dolor sit amet, magna autem voluptatum mel ei, purto aperiam interesset vis no.

GIVE NOW

Calendar Icon UPCOMING EVENT

Solid Rock Cafe

JANUARY 16, 2015

©Stoneham Memorial Church 2016. All Rights reserved

/*CSS

body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 12px;
background-color: #EDE0CD;
}

.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

.padding {
padding: 0 20px;
}

/*Header
**************************************************************************/

#header {
background-color: #303538;
}

.nav ul li a{
text-decoration: none;
}
.nav ul li{
display: inline-block;
}

#topNav {
background-color: #b7b8b3;
width: 100%;
max-width: 320px;
margin: 0 auto;
webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
#topNav ul {
margin: 5 auto;
}
#topNav ul li {
font-size: 10px;
font-weight: bold;
padding-right: 5px;
}
#topNav ul li a {
color: #303538;
}

#mainNav ul li {
padding-bottom: 10px;
}
#mainNav ul li a {
color: #ffffff;
}

/*Banner
**************************************************************************/

#banner, #slideShow {
width: 100%;
overflow: hidden;
}
#slideShow img {
width: 100%;
}

/*About
**************************************************************************/

#about {
width: 100%;
max-width: 1080px;
}
.col2 {
width: 50%;
float: left;
}
.col2 h3,
.col2 p {
color: #ffffff;
}
#services {
background-color: #3657a6;
}
#location {
background-color: #5aacb8;
}[/php]

#2

Please, Please, Please, place your code inside the PHP tags so we can just copy it to our editors for testing.
Also, when you do that, you will see that each line has a line number. Tell us which lines are giving you a problem.
It is hard to look thru all that code for just a few lines that are giving you errors.

And, at least tell us which “elements” have the extra white spaces in them…

#3

You didn’t look to hard, there is an HTML section, but you chose the questions and comments section instead?

#4

I took your code and reformatted it into one page for testing. Here is a copy. I do not see any problems
with random spaces in the page once viewed on my server. What area are you talking about?
[php]
<!doctype html>

Stoneham Memorial Church body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; background-color: #EDE0CD; }

.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

.padding {
padding: 0 20px;
}

/*Header
**************************************************************************/

#header {
background-color: #303538;
}

.nav ul li a{
text-decoration: none;
}
.nav ul li{
display: inline-block;
}

#topNav {
background-color: #b7b8b3;
width: 100%;
max-width: 320px;
margin: 0 auto;
webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
#topNav ul {
margin: 5 auto;
}
#topNav ul li {
font-size: 10px;
font-weight: bold;
padding-right: 5px;
}
#topNav ul li a {
color: #303538;
}

#mainNav ul li {
padding-bottom: 10px;
}
#mainNav ul li a {
color: #ffffff;
}

/*Banner
**************************************************************************/
#banner, #slideShow {
width: 100%;
overflow: hidden;
}
#slideShow img {
width: 100%;
}

/*About
**************************************************************************/
#about {
width: 100%;
max-width: 1080px;
}
.col2 {
width: 50%;
float: left;
}
.col2 h3,
.col2 p {
color: #ffffff;
}
#services {
background-color: #3657a6;
}
#location {
background-color: #5aacb8;
}

<div id="banner">
	<div id="slideShow">
		<img src="images/slideshow01.jpg">
	</div>
</div><!--End of div banner-->

<div id="about" class="clearfix">
	<div id="services" class="col2">
		<h3><img src="images/servicesIcon.png" alt="Clock Icon" style="width:30px"> SERVICES</h3>
		<p>Saturday 9:45am | Wednesday 7pm</p>
	</div>
	<div id="location" class="col2">
		<h3><img src="images/locationIcon.png" alt="Location Icon" style="width:30px"> LOCATION</h3>
		<p>29 Maple Street | Stoneham, MA 02180</p>
	</div>
</div><!--End of div about-->

<div id="welcome">
	<div id="welcomeInfo" class="padding">
		<h4>WELCOME TO STONEHAM MEMORIAL SEVENTH-DAY ADVENTIST CHURCH</h4>
		<P>No alia malis eruditi his, eu eos homero delenit inciderint. Bonorum suavitate ad vix, euismod constituam eum ex, ex melius perpetua nam. Vix falli oporteat sadipscing cu, doming impedit ut eum. Sit id nonumy legendos scribentur, eum at soleat delectus invenire.</P>
	</div>
</div><!--End of div welcome-->

<div id="col3">
	<div id="new" class="col3">
		<div class="col3Img">
			<img src="" alt="New Here?">
		</div>
		<div class="col3Info padding">
			<h5>HEW HERE?</h5>
			<P>Lorem ipsum dolor sit amet, magna autem voluptatum mel ei, purto aperiam interesset vis no.</P>
			<button type="button">JOIN US</button>
		</div>
	</div>
  
    <div id="who" class="col3">
        <div class="col3Img">
            <img src="" alt="New Here?">
        </div>
        <div class="col3Info padding">
            <h5>WHO WE ARE</h5>
            <P>Lorem ipsum dolor sit amet, magna autem voluptatum mel ei, purto aperiam interesset vis no.</P>
            <button type="button">LEARN MORE</button>
        </div>
    </div>

    <div id="givings" class="col3">
        <div class="col3Img">
            <img src="" alt="New Here?">
        </div>
        <div class="col3Info padding">
            <h5>ONLINE GIVING</h5>
            <P>Lorem ipsum dolor sit amet, magna autem voluptatum mel ei, purto aperiam interesset vis no.</P>
            <button type="button">GIVE NOW</button>
        </div>
    </div>

</div><!--End of div col3-->

<div id="events">
	<div id="upcoming" class="padding">
		<p><img src="" alt="Calendar Icon"> UPCOMING EVENT</p>
	</div>
	<div id="eventName" class="padding">
		<p>Solid Rock Cafe</p>
		<p>JANUARY 16, 2015</p>
	</div>
	<div id="calendar" class="padding">
		<a href="" alt="View Calendar">VIEW FULL CALENDAR</a>
	</div>
</div><!--End of div events-->

<div id="footer">
	<div id="footerInfo" class="padding">
		<p>©Stoneham Memorial Church 2016. All Rights reserved</p>
	</div>
</div><!--End of div footer-->
[/php]
Sponsor our Newsletter | Privacy Policy | Terms of Service