Solved

URGENT HELP WITH CSS WHITESPACE

Posted on 2016-11-21
5
14 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

759 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

20 Experts available now in Live!

Get 1:1 Help Now