Solved

URGENT HELP WITH CSS WHITESPACE

Posted on 2016-11-21
5
18 Views
Last Modified: 2016-11-22
Hi all,

Anyone know why my website doesn't fit my screen?? it has this white space going down the right side and I can't work out how to get rid of it so my website is full width.

Any help would be appreciated thanks, here is an example of what it looks like.


Screen-Shot-2016-11-21-at-21.38.32.pngScreen-Shot-2016-11-21-at-21.38.52.pngScreen-Shot-2016-11-21-at-21.38.45.png
Here is my Code

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Ek+Mukta" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
    <meta charset="utf-8">
</head>

<!-- START CONTAINER -->

<body>
    <div id="container">
    <!-- START HEADER SECTION -->

    <div id="header">

        <!-- Logo -->

        <div id="topsection">
        <div id="logo">
            <a href="index.html"><img src="Assets/logo.png"></a>
        </div>


        <!-- Main Nav Bar -->

        <div id="mainnav">
            <ul>
                <li><a href="index.html" accesskey="1">Home</a></li>
                <li><a href="about.html" accesskey="2">About</a></li>
                <li><a href="features.html" accesskey="3">Features</a></li>
                <li><a href="reviews.html" accesskey="4">Reviews</a></li>
                <li><a href="pricing.html" accesskey="5">Pricing</a></li>
                <li class="download"><a href="#" accesskey="6">Download</a></li>
            </ul>
        </div>
</div>
        <!-- Header text -->

        <div id="headtext">

            <h1>Download The IOS App Today!</h1>

            <p>Kobra is an all in one cloud sharing and social networking platform built for developers. Kobra makes it easier than ever to collaborate, share and download files over the cloud to all your devices without compromising your devices internal storage.

            </p>

            <p>With kobra you can now share and execute documents, Programmes, command line files and more right from the cloud without the need to wait for a large download and waste internal storage. </p>

            <!-- Header Buttons -->

            <div class="button1">TRY APP</div>
            <div class="button2">BUY APP</div>


        </div>

        <!-- Header Image -->

        <div id="head"><img src="Assets/iphone-hand.png" alt="Kobra Iphone APP Demonstration"></div>

        <!-- END HEADER SECTION -->

        <div id="clear"></div>

        <!-- START FEATURES SECTION -->

        <div id="features">

            <div class="feature"><img src="Assets/f1.png" onmouseover="this.src='assets/asset7.png'" onmouseout="this.src='assets/f1.png'" />
                <div class="featuretitle">50GB FREE</div>
            </div>

            <div class="feature"><img src="Assets/f2.png" onmouseover="this.src='assets/asset8.png'" onmouseout="this.src='assets/f2.png'" />
                <div class="featuretitle">ADD FRIENDS</div>
            </div>

            <div class="feature"><img src="Assets/f3.png" onmouseover="this.src='assets/asset9.png'" onmouseout="this.src='assets/f3.png'" />
                <div class="featuretitle">FAST DOWNLOADS</div>
            </div>

            <div class="feature"><img src="Assets/f4.png" onmouseover="this.src='assets/asset10.png'" onmouseout="this.src='assets/f4.png'" />
                <div class="featuretitle">USER PROFILES</div>
            </div>

        </div>


        <!-- iphone infographic -->



        <div id="iphoneinfo"><img src="assets/iphoneinfo.png" </div>


            <!-- END FEATURES SECTION -->

            <div id="clear"></div>

            <!-- START DOWNLOAD SECTION -->

            <div id="downloadsection">
                <div id="downloadtext">
                    <h1>Download the app Today!</h1>
                    <div class="button3">TRY APP</div>
                    <div class="button4">BUY APP</div>
                </div>
            </div>



            <!-- END DOWNLOAD SECTION -->

            <!-- START FOOTER SECTION -->
            <div id="footer">
                <div id="appsection">
                    <h1>More Apps By Inspiro Media</h1>
                    <div class="iapp"><img src="Assets/Asset13.png"></div>
                    <div class="iapp"><img src="Assets/Asset14.png"></div>
                    <div class="iapp"><img src="Assets/Asset15.png"></div>
                </div>

                <div id="copyright">
                    <ul>
                        <li>Copyright 2016 @ Inspiro Media Limited.</li>
                        <li>
                            <a href="http://facebook.com">
                                <div class="bottomimg"><img src="Assets/Asset17.png"></div>
                            </a>
                        </li>
                        <li><a href="contact.html" accesskey="6">Contact</a></li>
                        <li><a href="support.html" accesskey="7">Support</a></li>
                        <li>
                            <a href="download.html">
                                <div class="bottomimg"><img src="Assets/Asset16.png"></div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

</div>
            <!-- END FOOTER SECTION -->


            <!-- End Container -->


</body>

</html>

Open in new window


CSS

/* START CSS RESET */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* END CSS RESET */


/* START CONTAINER  */

#container {
    width: 1439px;
}

/* END CONTAINER  */


/* START HEADER SECTION  */

#header {
    background-color: #0C2633;
    height: 700px;
    width: 100%;
}

/* END HEADER SECTION  */


/* START LOGO  */

#logo {
    float: left;
    Width: 200px;
    height: 200px;
    padding: 10px;
    margin: 5px;
    margin-left: 80px;
}

/* END LOGO  */


/* START MAIN NAV  */

#mainnav {
    margin-right: 10px;
}
#mainnav ul {
    float: right;
    margin-top: 90px;
    margin-right: 50px;
    padding-bottom: 30px;
    width: 585px;
    word-spacing: 30px;
    border-bottom: 1px solid white;
}
#mainnav ul li {
    display: inline;
    list-style-type: none;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 0px;
    font-family: 'Ek Mukta', sans-serif;
}
#mainnav ul li a {
    color: white;
    text-decoration: none;
}
#mainnav ul li a:hover {
    color: #AF2621;
}

/* END MAIN NAV  */


/* START DOWNLOAD BUTTONS */

.download {
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #1DA6C4;
    height: 70px;
    text-align: center;
    margin-left: 350px;
    margin-right: 80px;
}
.download:hover {
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #c0392b;
    height: 70px;
    text-align: center;
    margin-left: 350px;
    margin-right: 80px;
}

/* END DOWNLOAD BUTTONS */


/* START HEADER */

#head img {
    float: left;
    width: 360px;
    height: 470px;
    padding: 0px;
}
#headtext {
    float: left;
    width: 630px;
    height;
    300px;
    padding: 5px;
    clear: both;
    margin-right: 150px;
    margin-left: 190px;
    text-align: justify;
    font-family: 'Ek Mukta', sans-serif;
}
#headtext p {
    color: white;
    margin-bottom: 20px;
    line-height: 20px;
}
#headtext h1 {
    margin-bottom: 20px;
    color: #1da6c4;
    font-size: 45px;
    text-transform: uppercase;
}
#clear {
    clear: both;
}
#header {
    width: 1439px;
}

/* Styling for header Buttons */

.button1 {
    width: 230px;
    float: left;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #1fb18a;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}
.button1:hover {
    width: 230px;
    float: left;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #c0392b;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}
.button2 {
    float: right;
    width: 230px;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #1DA6C4;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}
.button2:hover {
    float: right;
    width: 230px;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #c0392b;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

/* END HEADER */


/* START FEATURES */

#features {
    height: 330px;
    width: 100%;
    background-color: #112a3c;
    margin-bottom: 50px;
}
.feature {
    float: left;
    padding: 15px;
    margin-left: 145px;
    margin-top: 40px;
    color: white;
}
.feature img {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
}

/* Feature Image Animation */

.feature img:hover {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.featuretitle {
    text-align: center;
    font-family: 'Ek Mukta', sans-serif;
}
#iphoneinfo img {
    width: 80%px;
    height: 800px;
    display: block;
    margin: 0 auto;
    margin-bottom: 50px;
}

/* END FEATURES */


/* START DOWNLOAD SECTION */

#downloadsection {
    background-color: #0C2633;
    height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Download Section Title */

#downloadsection h1 {
    margin: top: 50px;
    text-align: center;
    margin-bottom: 35px;
    color: #1da6c4;
    font-size: 40px;
    text-transform: uppercase;
    font-family: 'Ek Mukta', sans-serif;
}

/* Download Section Text */

#downloadtext {
    width: 52%;
    display: block;
    margin: 0 auto;
    font-family: 'Ek Mukta', sans-serif;
}

/* Button Styling */

.button3 {
    width: 310px;
    float: left;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #1fb18a;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

/* Button Hover Styling */

.button3:hover {
    width: 310px;
    float: left;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #c0392b;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

/* Button Styling */

.button4 {
    float: right;
    width: 310px;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #1DA6C4;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

/* Button Hover Styling */

.button4:hover {
    float: right;
    width: 310px;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #c0392b;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

/* END DOWNLOAD SECTION */


/* START FOOTER SECTION */

#footer {
    height: 250px;
    width: 100%;
}

/* APP Images */

.iapp img {
    max-width: 100px;
    max-height: 100px;
}
.iapp {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0 auto;
    padding: 10px;
}
#appsection {
    width: 368px;
    height: 150px;
    margin: 0 auto;
}
#appsection h1 {
    text-align: center;
    font-size: 25px;
    margin-bottom: 30px;
    margin-top: 50px;
    font-family: 'Muli', sans-serif;
}
.iapp h1 {
    font-size: 30px;
    text-align: center:
}

/* footer Images */

.bottomimg img {
    max-width: 250px;
    max-height: 40px;
    display: inline;
}
#copyright {
    width: 1500px;
    height: 70px;
    margin-top: 60px;
    text-align: center;
    background: #0C2633;
}

/* Copyright Text */

#copyright ul li {
    display: inline-block;
    height: 15px;
    margin-left: 30px;
    padding: 10px;
    color: white;
    list-style-type: none;
}
#copyright ul li a {
    color: white;
    font-family: 'Muli', sans-serif;
}

/* END FOOTER SECTION */

/* START MEDIA QUERIES */

/* TABELTS 1024px */

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

    #header {width: 100%; margin: 0;  }
    #mainnav {width: 100%;}
    #head img {display: none;}
    #headtext {width: 70%;}
    #headtext h1 {font-size: 2.5em;}
    .button1 {width: 39%;}
    .button1:hover {width: 39%;}
    .button2 {width: 39%; margin-bottom: 50px;}
    .button2:hover {width: 39%;}
    #features {width: 100%}   
    .feature {width: 30px; height: 30px;}
    .featuretitle {width: 120px; font-size: 0.8em; margin-left: 15px;}
    #iphoneinfo {width:100%;}
    #downloadsection {width: 100%;}
    #footer {width: 100%;}
    #copyright {width: 100%}
    #copyright ul li {margin-left: 10px;}
    }

Open in new window


Thanks
0
Comment
Question by:Mike Moore
  • 2
  • 2
5 Comments
 
LVL 14

Accepted Solution

by:
Juan Ocasio earned 300 total points
ID: 41896768
Try this:

#container {
    width: 1439px;
    margin: auto;
}
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 200 total points
ID: 41896901
Please go back to your code and double check your opening and closing Div's. I don't think you have them closing properly.  

I pasted your code to https://dirtymarkup.com/ and started matching up the Div's and I believe  your div#header is matching up with the end of your line 122
</div><!-- END FOOTER SECTION -->

Open in new window


Run your code through https://validator.w3.org/nu/#textarea as well

Double check your mark up.  Then after that, I would ask why you are specifying container width's in px and not % if you want them to go full width?
0
 

Author Comment

by:Mike Moore
ID: 41897196
Hi thank you both for your effort but unfortunately still no luck, and in answer to your question I in regards to the width I'm still very new to web design I am in my 1st month of uni but If I specify the width as a % will it just adjust to the full width of the device or??

Thanks again guys I really appreciate your effort to help.
0
 
LVL 14

Assisted Solution

by:Juan Ocasio
Juan Ocasio earned 300 total points
ID: 41897343
The reason this is happening is because your container does not go the entire width of the viewport.  try setting the body as follows:

body {
    line-height: 1;
    background-color: #0C2633;
}
0
 

Author Comment

by:Mike Moore
ID: 41897350
Hi guys, I just figured it out, basically it was the ul in the footer that had a width of 1500px which was pushing out the white space so I changed that to width: 100% and it got rid of the white space thanks for all your help tho
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now