Unwanted Space On the right Of my Website? (Been stuck on this for a month)

Question

I've tried setting all my widths to auto, still didn't work.

here's my html,

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Men of God</title>

<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<link href="fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fullsize/jquery.js"></script>
<script type="text/javascript" src="fullsize/jquery.fullsize.minified.js"></script>  
<script language="javascript" type="text/javascript">
$(function(){
    $("div.templatemo_gallery img").fullsize();
});
</script>
</head>

</head>
<body>

    <div id="templatemo_container">
        <div id="templaetmo_header">
            <div id="templatemo_header_logo_area">

                    <div id="templatemo_header_logo">
                        Men of God
                    </div>

                    <div class=" cleaner"></div>

                    <div id="templatemo_header_slogan">
                       Antelope Valley
                    </div>
            </div>

        </div>
        <!-- end of header -->
         <div class="cleaner"></div>

       <div id="templatemo_menu">

                <ul>
                        <li><a href="#" class="current">HOME</a></li>
                        <li><a href="About-us.html">ABOUT US</a></li>
                        <li><a href="Media.html" target="_parent">MEDIA</a></li>
                        <li><a href="#">TESTIMONY'S</a></li>
                        <li><a href="#">CALENDAR</a></li>
                        <li><a href="#" class="last">CONTACT</a></li>
                </ul> 
        </div> 

      <div id="templatemo_content_area">


        <div class="templaetmo_3_col">
            <div class="templatemo_title_left">

                <h1>WELCOME</h1>
                <h3>To Our</h3>
            </div>

            <div class="templatemo_title_right">
                Journey
            </div>

            <div class="cleaner"></div>
            <p><!--div id="spacing-paragraph"-->We are located in antelope valley and have a passion for god. come check us out. fghf jhf ghf ghf fg fggfjfg sgjkhkh gasjg bsfjkhgghfghdffhfg jhgfjhjhgfhgfjhgjf fjghfj gfjghfj gjfhg jfhg jfhg fjgh fjhjhjhjhf jhjfhgjfh </p>

            <h1>Schedule</h1>
            <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>

            <ul class="templaetmo_list">
                <li>Phasellus tincidunt</li>
                <li>Tortor lacinia blandit</li>
                <li>Commodo nunc augue</li>
                <li>Mattis eros</li>
                <li>Convallisest augue</li>
                <li>Nunc ante erat</li>
            </ul>


        </div>

        <!--start-->
       <div class="templaetmo_3_col templatemo_3_col_middle">
       <div id="photos"><h1>Latest Photos</h1></div>

            <div class="templatemo_gallery">
                <img src="images/templatemo_big_1.jpg" longdesc="images/templatemo_big_1.jpg" height="70px" width="75px" title="Beach" alt="Beach" />
                <img src="images/templatemo_big_2.jpg" longdesc="images/templatemo_big_2.jpg" class="img_middle"  height="70px" width="75px" title="Sunset" alt="Sunset" />
                <img src="images/templatemo_big_3.jpg" longdesc="images/templatemo_big_3.jpg"  height="70px" width="75px" title="Wild Plants" alt="Wild Plants" />

                <img src="images/templatemo_big_4.jpg" longdesc="images/templatemo_big_4.jpg"  height="70px" width="75px" title="Bermuda Island" alt="Bermuda Island" />
                <img src="images/templatemo_big_5.jpg" longdesc="images/templatemo_big_5.jpg" class="img_middle"  height="70px" width="75px" title="Sunset" alt="Sunset" />
                <img src="images/templatemo_big_6.jpg" longdesc="images/templatemo_big_6.jpg" height="70px" width="75px" title="Yosemite Valley" alt="Yosemite Valley" />

                <img src="images/mog/1.jpg" height="70px" longdesc="images/mog/1.jpg" width="75px" title="Waterfall" alt="Waterfall" />
                <img src="images/mog/2.jpg"height="70px" width="75px" longdesc="images/mog/2.jpg" class="img_middle"  title="Sunset" alt="Sunset" />
                <img src="images/mog/3.jpg" height="70px" width="75px" longdesc="images/mog/3.jpg" title="Jetty" alt="Jetty" />
                <img src="images/mog/4.jpg"height="70px" width="75px" longdesc="images/mog/4.jpg"  title="Waterfall" alt="Waterfall" />
                <img src="images/mog/5.jpg" height="70px" width="75px"class="img_middle" longdesc="images/mog/5.jpg" title="Sunset" alt="Sunset" />
                <img src="images/mog/6.jpg" height="70px" width="75px" longdesc="images/mog/6.jpg" title="Jetty" alt="Jetty" />

                <div class="cleaner"></div>
            </div>  


        <div class="templaetmo_3_col templatemo_3_col_middle">
            <!--where i deleted stuff-->
                <div class="cleaner"></div>
            </div>  



            <div class="cleaner"></div>





        </div>

        <!--<div class="contact-paragraph">
        <h1>Join Us</h1>
        <img src="images/templatemo_img_1.jpg" width="33%" height="20%" position="relative"/>
        <p id="paragraphjoinus">We have new men come in and out all the time if you are interested feel free to stop by. You can email us if you have any questions or want to hear more about us</p></div><ul class="paragraphmenu">
        <a href='phone' style="text-decoration:none"><li class="phone">Phone Number: 555-889-9876</li></a>
         <a href='location' style="text-decoration:none"><li class="location">Location: gkhg gf jfg west gfdtlane.</li></a>
         <a href='email' style="text-decoration:none"><li class="email">Email: @hopechapel</li></a>
        </ul>
            </div><!--slider-->



            <div class="cleaner"></div>


          <div class="templatemo_more"></div>
            <div class="cleaner"></div>


        <div class="cleaner"></div>
      </div><!-- End Of Content area-->

      <div id="templatemo_footer">

      </div>

    </div>

</body>
</html>

My Css,

html {
    background: #000;
    margin: 0 auto;
}

body {
    margin: 0;
    padding: 0;
    font-family: Tahoma, "Trebuchet MS", Verdana;
    font-size: 12px;
    line-height: 1.5em;
    width: 100%;/*1800px*/
    min-width: 1800px;
    max-width: 1800px;
    display: table;
    background: url(images/mog/mog.jpg) center top no-repeat #000;



}
img {
    max-width: 100%;
}
a:link, a:visited { color: #FFFFFF; text-decoration: underline; }
a:active, a:hover { color: #FFFF00; text-decoration: none; }

p {
    font-family: Tahoma, "Trebuchet MS", Verdana;
    font-size: .91em;
    color: #777;
    text-align: justify;
    margin: 0 0 20px 0; 
}

h1 {
    font-family: Tahoma, "Trebuchet MS", Verdana;
    font-size: 2.273em;
    color: #b0b0b0;
    font-weight: normal;
    margin: 0 0 15px 0;
}


h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.14em;
    color: #ac6c07;
    margin: 0 0 10px 0;
}

h3 {
    font-family: Tahoma;
    font-size: 1.23em;
    color: #a18800;
    font-weight: normal;
    margin: 0 0 3px 0;
}

#templatemo_container {
    width: 100%; /*940px*/
    margin: 0 auto;
}

#templaetmo_header {
    width: 50%; /*960px*/
    height: 100%; /*380px*/
    margin-top: -23%;
    margin-bottom: 40%;
    position: relative;
}

#templatemo_header_logo_area {
    width: 65%; /*350px*/
    height: 55%;/*75px*/
    margin: 55% 0 0 10%;/*70px 0 0 50px*/
}

#templatemo_header_logo{
    float: left;
    color: #fff;
    text-shadow: 2px 2px #4A2609;
    margin: 0 auto;


    font-size: 3.65em;
    text-indent: 50px;
    font-family: 'Droid Serif', serif;
    margin: 10% 0 3% -15%;
    width: 200%;
    height: 100%;
    position: relative;
}

#templatemo_header_slogan {
    float: right;
    font-family: "Brush Script MT", Arial;
    font-size: 2.5em;
    font-style: italic;
    color: #D89300;
    margin: 0 20% 0 5%;
    padding-top: 18px;

}

/* menu */

#templatemo_menu {
    float: left;
    width: 100%;/*960px*/
    height: 15%;/*25px*/
    background: ;/*url(images/templatemo_menu_bg.jpg)*/
    padding:0;
    margin: -10% 0 0 0;
}

#templatemo_menu ul {
    float: left;
    margin: 55px 0 10px 30px;
    padding: 0 0 0 0;
    width: 100%;/*960px*/
    list-style: none;
}

#templatemo_menu ul li {
    display: inline;
}

#templatemo_menu ul li a {
    margin: 0 auto;
    padding: 5px 40px 0 40px;

    height: 50%;/*20px*/
    text-align: center;
    font-size: 1.2em;
    text-align: center;
    text-decoration: none;
    color: #b0b0b0; 
    font-family: 'Droid Serif', serif;
    outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
    color:#ffd800;
}

#templatemo_menu li .last {
    background: none;
}

/* end of menu*/

#templatemo_content_area {
    width: 100%;/*960px*/
    margin: 0 auto;
}

.templatemo_title_left {
    float: left;    
    width: 120px;
    height: 46px;
}

.templatemo_title_right {
    float: right;   
    width: 165px;
    height: 40px;
    color: #d89300;
    font-family: Tahoma;
    font-size: 3.6em;
    margin: 0;
    padding: 6px 0 0 0;
}

.templatemo_title_left  h1 {
    float: left;
    display: block;
    font-family: Tahoma;
    font-size: 2.2em;
    color: #e17638;
    font-weight: normal;
    margin: 0 0 5px 0;
}

.templatemo_title_left  h3 {
    font-family: Tahoma;
    font-size: 1.7em;
    color: #fff;
    font-weight: normal;
    display: block;
    float: right;
}



.templatemo_more{
    float: right;
    color: #777;
    font-size: 11px;/*.68em*/
    margin: 0 10px 0px 0;
}

.templatemo_more a{
    text-decoration: none;
    color: #777;
}

.templatemo_more a:hover{
    text-decoration: underline;
}


.templatemo_more_2{
    float: left;
    color: #b0b0b0;
    font-size: 10px;/*1.6m*/
    margin: 0 10px 10px 0;
    background: url(images/templatemo_more.png) no-repeat ;
    padding: 0 0 0 10px ;
    background-position: 0 7px;
}

.templatemo_more_2 a{
    text-decoration: none;
    color: #777;
}

.templatemo_more_2 a:hover, .templatemo_more_2:hover{
    text-decoration: underline;
}

#templatemo_footer {
    width: 100%;
    color: #b0b0b0;
    margin: 0;
    padding: 10px 0;
    text-align: center;
}

.templaetmo_list {
    list-style: none;
    padding: 0 0 0 25px;
}

.templaetmo_list li {
    color: #777777;
    font-family: Tahoma;
    font-size: .95em;
    background: url(images/templatemo_bullet.jpg) no-repeat;
    background-position: 0 6px;
    padding: 0 0 0 15px;
    margin: 0 0 10px 0 ;
}

.cleaner {
    clear: both;
    height: 0;
    margin-right: 300px;
    margin-top:0px;
    margin-left: 0px;
    padding: 0;
    display: hidden;


}

.photos h1 {
    margin-right: 10px;
    margin-left: 0px;
    margin-top:20px;
    position: relative;
    display: inline-block;
    left: 10px;
}
.templaetmo_3_cul h1 img {
    float: left;
    width: 290px;
    padding: 10px 5px;
    right: 100px;
    position: relative;

}
#suptho {
    right: 0px;
    left: 70%;
    bottom: 39%;
    position: relative;
    border: dashed 5px grey;
    overflow: hidden;
    display: table;


}
.contactusok {
    right: 0px;
    left: 70%;
    bottom: 39%;
    position: relative;
    width: 50%;
    height: 50%;
    display: none;

}
.contact-paragraph {
    margin: 0 auto;
    /*right: 0px;
    left: 770px;
    bottom: 424px;
    position: relative;
    display:block;*/
    position: relative;
    max-width: 90%;
}
.contact-paragraph h1 {
    margin: 0 auto;
    /*margin-left: -200px;
    margin-bottom: 90px;
    position: relative;
    padding: inherit;
    top: 445px;
    right: 750px;*/
}

#paragraphjoinus {
    margin-right: 67%;
    position: relative;
    left: -100px;
    display: table;
}
.contact-paragraph img {
    margin: 0 auto;
    /*margin: 20px;
    margin-top:10px;
    MARGIN-LEFT: 10px;
    position: relative;
    left: -110px;*/
    border: 5px dashed grey;
    max-width: 33%;
    min-width: 33%;
    min-height: 20%;
}

    #spacing-paragraph {
        margin-top: 10px;
        display: relative;
    }
.paragraphmenu {
    margin: 0 auto;
    /*list-style: none;
    padding: 0px 0px 0 10px;
    margin-right: 0px;
    left: 690px;
    bottom: 420px;
    display: block;
    position: relative;
    overflow: hidden;*/
    line-height: 2.9;
    }
    .ul {
        list-style:none;
    }

    li.phone {

    background: url('images/phone3.jpg') no-repeat;
    background-position: 0 auto;    
    height: 33px;
    margin: 0 auto;
    /*margin-left: 2px;
    padding-left: 50px;*/
    background-size: 31px;
    }

    li.location {
    background: url('images/location4.jpg') no-repeat;
    background-position: 0px 0px 0px 50px;  
    height:  33px;
    margin-left: 3px;
    padding-left: 50px;
    padding-top: 2px;
    background-size: 27px;
    }

    li.email {
    background: url('images/email6.jpg') no-repeat;
    background-position: 0px 0px 0px 50px;
    margin-left: 0px;
    height: 34px;
    padding-left: 54px;
    padding-top: 5px;
    background-size: 32px;
}
    .paragraphmenu li {
        color: #777777;
    font-family: Tahoma;
    font-size: .95em;




    margin-bottom:10px;
    }

    .paragraphmenu ul {
        margin: 0;
        padding: 0;
    }

    .center {
        margin: 0 auto;
        position: relative;
    }
    /*img*/
    .templaetmo_3_col {
    float: left;
    width: 290px;
    padding: 10px 5px;
}

.templaetmo_3_col img {
    border: 5px solid #7b4d23;
    margin: 0 0 15px 0;

}
.templatemo_3_col_middle {
    margin: 0 30px;
    width: 271px;
    background: ;
    border: 0px solid #363636;
    padding: 10px;
}

.templaetmo_3_col .templatemo_gallery img{
    border: 5px groove #b0b0b0;

}

.templatemo_3_col_middle img {
    float: left;
    border: none;
}

.templatemo_3_col_middle img.img_middle {
    margin: 0 8px;
}
#photos h1 {
    margin-top: 10px;
    margin-bottom: 40px;
    padding-bottom:;



}
/*--------------------------ABOUT-US----------------------------------------------*/


.H1_ABOUT-US h1 {
    width:300px;
    padding: 0px;
    margin-left: 625px;
    margin-bottom:100px;
    padding-bottom: 50px;
    text-align:;
    top:10px;
    bottom: 0px;
    left: 210px;
    right: 0px;
    float: none;
    word-wrap: break-word;
    font: 32px 'leagueGothicRegular';
    color: #d89300;
    text-shadow: 0px 1px 1px #4d4d4d;
    position: relative;
}
.about-us-paragraph p {
    font-size: 24px;
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: brown;
    margin-top: 150px;/*580px*/
    margin-right: 0;/*50px*/
    margin-left: 450px;/*80px*/
    margin-bottom:0px;
    top: 500px;
    bottom: 0px;
    background: url('images/templatemo_mid_col_bg.jpg') repeat-x #E88A8B;
    background-size: 2px 2px 2px 2px;
    right: 0;
    position: absolute;
    padding-right: 0;
    padding-top: 0; 
    height: 100%;
    width: 100%;

}

.backgroundpic img {
width: 20%; 
height: auto; 
margin-top: 0px;
margin-bottom: 0px; 
margin-left: 490px;
position: relative;
bottom: 40px;
border: ridge;

}
.ourmission p {
    margin-bottom: 50px;
    bottom: 250px;
    left: 910px;
    color: #d89300;
    position: relative;
    font-size: 16px;
    line-height: normal;
    background:scroll;
}




#ourmission {
    top: 100px;
}





/*----------------------------------------------MEDIA-----------------------------*/

#mensvideo {
    display: block;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: center;
}











@media screen and (max-width: 1600px) {
#templatemo_menu ul {
    width: 150%;
}
templatemo_menu ul li a {
    padding: 0;
    margin: 0;
}
body {
    overflow:inherit;
    overflow-style:marquee-block;
    margin: 0 0 0 0;
    background-position: top left 31%;
}
#templatemo_container {
    width: 55%;
    position: center;
    float: left;
    margin: 0 0 0 15%;
}
#mensvideo {
    display: block;
    margin-top: 0px;
    margin-right: 290px;
    margin-bottom: 0px;
    margin-left: 0;
    text-align: center;
}
.H1_ABOUT-US h1 {
    width:300px;
    padding: 0px;
    margin-left: 625px;
    margin-bottom:50px;
    padding-bottom: 50px;
    text-align:;
    top:10px;
    bottom: 0px;
    left: 20px;
    right: 0px;
    float: none;
    word-wrap: break-word;
    font: 32px 'leagueGothicRegular';
    color: #d89300;
    text-shadow: 0px 1px 1px #4d4d4d;
    position: relative;
}
.about-us-paragraph p {
    font-size: 24px;
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: brown;
    margin-top: 100px;/*580px*/
    margin-right: 0;/*50px*/
    margin-left: 450px;/*80px*/
    margin-bottom:0px;
    top: 500px;
    bottom: 0px;
    left: -130px;
    right: 0px;
    position: absolute;
    padding-right: 0;
    padding-top: 0; 
    height: 100%;
    width: 100%;

}

.backgroundpic img {
width: 20%; 
height: auto; 
margin-top: 0px;
margin-bottom: 0px; 
margin-left: 310px;
position: relative;
bottom: 0px;
border: ridge;

}
.ourmission p {
    margin-bottom: 50px;
    bottom: 200px;
    left: 720px;
    color: #d89300;
    position: relative;
    font-size: 16px;
    line-height: normal;
    background:scroll;
}



}
@media screen and (max-width:1300px) {
    body {
        background-size: 43%;
}
#templatemo_container {
    width: 45%;
}
#templatemo_header_logo {
    left: 25px;
}
.contact-paragraph {
    right: 0px;
    left: 770px;
    bottom: 424px;
    position: relative;
    display:list-item;
    max-width: 100%;
}
#templatemo_menu {
    margin-bottom: 10px;
    margin-left: -30px;
}
#templatemo_header_slogan {
    margin:0 0 0 25%;
}
.H1_ABOUT-US h1 {
    width:300px;
    padding: 0px;
    margin-left: 590px;
    margin-bottom:100px;
    padding-bottom: 50px;
    text-align:;
    top:10px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    float: none;
    word-wrap: break-word;
    font: 32px 'leagueGothicRegular';
    color: #d89300;
    text-shadow: 0px 1px 1px #4d4d4d;
    position: relative;
}
.about-us-paragraph p {
    font-size: 24px;
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: brown;
    margin-top: 10px;/*580px*/
    margin-right: 0;/*50px*/
    margin-left: 270px;/*80px*/
    margin-bottom:0px;
    top: 500px;
    bottom: 0px;
    left: 30px;
    right: 0;
    position: absolute;
    padding-right: 0;
    padding-top: 0; 
    height: 100%;
    width: 100%;

}

.backgroundpic img {
width: 20%; 
height: auto; 
margin-top: -30px;
margin-bottom: 20px; 
margin-left: 300px;
position: relative;
bottom: 0px;
border: ridge;

}
.ourmission p {
    margin-bottom: 50px;
    bottom: 250px;
    left: 700px;
    color: #d89300;
    position: relative;
    font-size: 16px;
    line-height: normal;
    background:scroll;
}

Answer 1 · 2014-09-16T20:09:05Z

September 16, 2014 8:09pm

Umm off the top of my head I would make these changes and see how they work:

body {
    margin: 0;
    padding: 0;
    font-family: Tahoma, "Trebuchet MS", Verdana;
    font-size: 12px;
    line-height: 1.5em;
    /*width: 100%;  1800px*/
   /* min-width: 1800px;*/
    /*max-width: 1800px;*/
    display: table;
    background: url(images/mog/mog.jpg) center top no-repeat #000;
}

#templatemo_container {
    width: 100%; /*940px*/
    max-width: 940px;
    margin: 0 auto;
}

You may need to change some of the rest of your width settings on #templatemo_container childer, but that should get all of your content centered. The problem was that you had the #templatemo_container set to width:100% which takes up the whole screen and doesn't allow for the auto margins.

Answer 2 · 2014-09-16T20:50:33Z

September 16, 2014 8:50pm

Hi Nathan,

Is the website live? If so could you post a link please, we can then look at the code and see what changes work.

Thanks

Answer 3 · 2014-09-16T21:33:31Z

September 16, 2014 9:33pm

Andrew Shook, it worked! What did you do differently? The only thing now is i can't get the background pic to show, should be a pretty easy fix though. I wish I could show you guys what it looks like but the website isn't live.

Welcome to the Treehouse Community

Looking to learn something new?

Nathan Begnaud

Nathan Begnaud

Unwanted Space On the right Of my Website? (Been stuck on this for a month)

Ryan Duchene

Ryan Duchene

3 Answers

Andrew Shook

Andrew Shook

Nathan Begnaud

Nathan Begnaud

Andrew Shook

Andrew Shook

Wayne Priestley

Wayne Priestley

Nathan Begnaud

Nathan Begnaud