Clever Geek Handbook

My website has some empty spacing that I cannot get rid of

I am developing a very simple site and I encountered an error in the layout. I have a random one to the right of my web page that is not visible and that you can scroll through it and I don't know how to get rid of it. Nothing really happens in my HTMl, but here is the CSS of my project.

    @import url(http://nicholastodor.com/sf/usesf.css);

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: black;
    width: 100%;
    height: 100%;
}

#developmentTitle {
    margin: auto;
    font-family: "Avenir Next";
    color: lightgrey;
    font-size: 19px;
    vertical-align: middle;
    left: 13%;
    top: 103%;
    position: relative;
    -ms-transform: translate(0,-100%); /* IE 9 */
    -webkit-transform: translate(0,-100%); /* Safari */
    transform: translate(0,-100%);
}

#development {
    margin: auto;
    font-family: "Avenir Next";
    color: lightgrey;
    font-size: 15px;
    vertical-align: middle;
    left: 33%;
    top: 114%;
    position: relative;
    -ms-transform: translate(0,-116%); /* IE 9 */
    -webkit-transform: translate(0,-116%); /* Safari */
    transform: translate(0,-116%);  
}

#aboutMe {
    margin: auto;
    font-family: "Avenir Next";
    color: lightgrey;
    font-size: 15px;
    vertical-align: middle;
    left: 33%;
    top: 117%;
    position: relative;
    -ms-transform: translate(0,-116%); /* IE 9 */
    -webkit-transform: translate(0,-116%); /* Safari */
    transform: translate(0,-116%);  
}

#aboutMeTitle {
    margin: auto;
    font-family: "Avenir Next";
    color: lightgrey;
    font-size: 19px;
    vertical-align: middle;
    left: 13%;
    top: 100%;
    position: relative;
    -ms-transform: translate(0,-100%); /* IE 9 */
    -webkit-transform: translate(0,-100%); /* Safari */
    transform: translate(0,-100%);
}

#beginningTitle {
    margin: auto;
    font-family: "Avenir";
    color: lightgrey;
    font-size: 24px;
    text-align: center;
    vertical-align: middle;
    top: 50%;
    position: relative;
    -ms-transform: translate(0,-50%); /* IE 9 */
    -webkit-transform: translate(0,-50%); /* Safari */
    transform: translate(0,-50%);
}
+3


source to share


2 answers


It looks like you are translating a lot of things, I guess some of it goes off screen,

use overflow: hidden

on the parent of these elements translated

, see if it works

or maybe some default CSS is applied, you can reset for HTML

, BODY

etc.



or check DOM

on Chromium Pesticide for the different elements you have (this will give them colored borders to test) and see which one actually comes out of the screen and process it.

We can help you better if you upload your markup or even better use JSbin or JSFiddle and we'll edit it the way it should be and put it back.

+3


source


Browser CSS sets some margin on the element by default body

. This is why you have scrollbars on your page.

To get rid of it, just add margin: 0;

CSS to your style body

.



body {
    background-color: black;
    width: 100%;
    height: 100%;
    margin: 0; /* add this line */
}
0


source






More articles:


All Articles