CODEWITHSUNDEEP
css
AndrewDevs
AndrewDevs

Reputation: 13

Why is there a white space in the left side of my css

I am a new css programmer and there is a very annoying problem in my code. when I put the grey bars in they are not touching the left side of the screen they touch the right side but not the left side and I do not know why there is nothing in my code that is stopping them so I do not know why it would be doing that please help me fix it thanks! (the big white space in the middle is supposed to be there it is for a picture.)

<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link href="https://fonts.googleapis.com/css?family=Oswald"      rel="stylesheet"> 



<style type="text/css">




    #white{
        color:white;


    }


    .large {
        font-size:300%;
    }

    #green {
        color:black;
    }

    .underline {
        text-decoration:underline;
        }

        .bold {
            font-weight:bold;
        }

        .picture{
        position: absolute;
        top: 45px;
        right: 0;
        width: 1870px;
        height: 10px;

        }


        .greybox {
        background-color:#a5a5a5;
        position: absolute;
        top: 380px;
        right: 0;
        width: 1870px;
        height: 10px;
        border: 3px solid #a5a5a5;

        }


        .connect {
        background-color:#6b6b6b;
        position: absolute;
        top: 340px;
        right: 0;
        width: 1870px;
        height: 40px;
        border: 3px solid #6b6b6b;

        }


        .top {
         top:10px;
        width: 1870px;
        height:700px;
        z-index:2;
        text-align: center;




        }

        .bottom {
            background-color:#0a0a0a;
            width: 1600px;
            height:200px;
            text-align: center;


        }

        .purplebox {
            background-color:#6b6b6b;
            position: absolute;
            top: 0px;
            right: 0;
            width: 1870px;
            height: 40px;
            border: 3px solid #6b6b6b;





            }

        .greenbox {
        top:0px;
        width: 1870px;
        height: 500px;
        z-index:2;
        text-align: center;
        margin:150px 100px 30px 10px;
        float:center;
        font-family: 'Oswald', sans-serif;


        }


        }

        p {
            padding:0;
            margin:0;
        }





</style>  
</head>

<body>


<div class="greybox">


</div>


<div class="purplebox">

    <p class="large"></p>

</div>

<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870"> 
</div>

<div class="connect">
<p> Connect with me! </p>

</div>

<div class="top">

    <p id="green" class="large">idfk</p>

    </div>



</div>

<div class="greenbox">

    <p id="green" class="large">idfk</p>

    </div>

    <div class="greenbox">

    <p id="green" class="large">idfk</p>

    </div>

    <div class="bottom">

    <p id="white" class="large">Connect With me!</p>

    </div>

Upvotes: 0

Views: 2236

Answers (2)

pavelccz
pavelccz

Reputation: 86

Margins of <body> don't matter because those grey bars are absolutely positioned to the right therefore they stick to the right side of <html> element. If the screen resolution (the width of your screen or window) is bigger then the width: 1870px;, they are gonna stick to the right side and leave an empty space on the left.

If you want those grey boxes to always stick to both sides of your screen, use width: 100%; or no width and left: 0; instead:

.connect {
    background-color: #6b6b6b;
    position: absolute;
    top: 340px;
    right: 0;
    width: 100%;
    height: 40px;
    border: 3px solid #6b6b6b;
}

or

.connect {
    background-color: #6b6b6b;
    position: absolute;
    top: 340px;
    right: 0;
    left: 0;
    height: 40px;
    border: 3px solid #6b6b6b;
}

Both will stretch the element to the width of their parent element.

But it is good to set the body's position to relative and get rid of its default margins. In my opinion, you shouldn't use the <html> tag for styling. It will make those absolutely positioned grey boxes stick to the sides of <body> and not <html>:

body {
    margin: 0;
    position: relative;
}

See this link to learn more about positioning: http://www.w3schools.com/css/css_positioning.asp

Upvotes: 0

Pedro Estrada
Pedro Estrada

Reputation: 2419

By default the body on the page has this css:

body {
  display: block;
  margin: 8px; 
}
body:focus {
  outline: none; 
}

at the top of your css file just add:

body {
  margin:0;
}

this way you're working with 0 margins to begin with.

Upvotes: 1

Related Questions