html - Extra white space on the side of a site -
@font-face { font-family: 'open sans'; font-style: normal; font-weight: 300; src: local('open sans light'), local('opensans-light'), url(https://fonts.gstatic.com/s/opensans/v13/dxi1orhcpsqm3vp6mxoatrampu5_7cjhw5spxoen3vs.woff2) format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; } @font-face { font-family: 'raleway'; font-style: normal; font-weight: 300; src: local('raleway light'), local('raleway-light'), url(https://fonts.gstatic.com/s/raleway/v9/-_ctzj9b56b8rgxw8fariqzydmxhdd8saj6oajtfsbi.woff2) format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; } .place { height: 100vh; width: 100vw; } body { min-height: 200vh; max-width: 100%; margin: 0px; } h1 { color: white; font-family: 'raleway', sans-serif; position: relative; top: 40vh; left: 39vw; font-size: 3em; font-weight: 300; } * { margin: 0px; padding: 0px; } .lol { font-family: 'open sans', sans-serif; top: 43vh; left: 45.5vw; position: relative; } .catslol { top: 43.3vh; height: 3.4vw; width: 3.4vw; position: relative; left: 46.5vw; } .cool { height: 3.6vw; width: 3.6vw; position: relative; left: 47vw; top: 43.7vh; } .cool:hover { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; cursor: pointer; } .lmao { position: relative; text-align: center; font-family: 'open sans', sans-serif; right: -70vw; width: 20vw; height: 100vh; z-index: 75; background-color: black; color: white; } .catslol:hover { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .lol:hover { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .lmao.open { -ms-transform: translate(20vw, 0); -webkit-transform: translate(20vw, 0); -o-transform: translate(20vw, 0); -moz-transform: translate(20vw, 0); transform: translate(20vw, 0); -webkit-transition: .3s ease-in-out transform; -moz-transition: .3s ease-in-out transform; -o-transition: .3s ease-in-out transform; transition: .3s ease-in-out transform; } img { height: 3vw; width: 3vw; } .place { background: black; background: #360033; /* fallback old browsers */ background: -webkit-linear-gradient(to bottom left, #360033, #0b8793); /* chrome 10-25, safari 5.1-6 */ background: linear-gradient(to bottom left, #360033, #0b8793); /* w3c, ie 10+/ edge, firefox 16+, chrome 26+, opera 12+, safari 7+ */ }<body> <section class="place"> <h1>james trombo</h1> <a href="https://github.com/darkreaperrising"> <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on"> </a> <a href="https://www.instagram.com/james.trombo/"> <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on"> </a> <a href="mailto:jamestrombo@gmail.com"> <img class="cool" src="daquan.png" kasperskylab_antibanner="on"> </a> </section> <section class="aboutme"> <div class="lmao"> <p>hey internet people! i'm james , bunch of stuff code, play sports , sleep until 1. on main page there of links limited social media.</p> </div> </section> </body>why there space on right side? have set margin , padding 0.
it's because of
h1 { ... left: 39vw; ... } it inherit's 100vw
.place { height: 100vh; width: 100vw; } so page width 139vw gives padding. removing solves problem:
@font-face { font-family: 'open sans'; font-style: normal; font-weight: 300; src: local('open sans light'), local('opensans-light'), url(https://fonts.gstatic.com/s/opensans/v13/dxi1orhcpsqm3vp6mxoatrampu5_7cjhw5spxoen3vs.woff2) format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; } @font-face { font-family: 'raleway'; font-style: normal; font-weight: 300; src: local('raleway light'), local('raleway-light'), url(https://fonts.gstatic.com/s/raleway/v9/-_ctzj9b56b8rgxw8fariqzydmxhdd8saj6oajtfsbi.woff2) format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; } .place { height: 100vh; width: 100vw; } body { min-height: 200vh; max-width: 100%; margin: 0px; } h1 { color: white; font-family: 'raleway', sans-serif; position: relative; top: 40vh; font-size: 3em; font-weight: 300; } * { margin: 0px; padding: 0px; } .lol { font-family: 'open sans', sans-serif; top: 43vh; left: 45.5vw; position: relative; } .catslol { top: 43.3vh; height: 3.4vw; width: 3.4vw; position: relative; left: 46.5vw; } .cool { height: 3.6vw; width: 3.6vw; position: relative; left: 47vw; top: 43.7vh; } .cool:hover { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; cursor: pointer; } .lmao { position: relative; text-align: center; font-family: 'open sans', sans-serif; right: -70vw; width: 20vw; height: 100vh; z-index: 75; background-color: black; color: white; } .catslol:hover { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .lol:hover { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .lmao.open { -ms-transform: translate(20vw, 0); -webkit-transform: translate(20vw, 0); -o-transform: translate(20vw, 0); -moz-transform: translate(20vw, 0); transform: translate(20vw, 0); -webkit-transition: .3s ease-in-out transform; -moz-transition: .3s ease-in-out transform; -o-transition: .3s ease-in-out transform; transition: .3s ease-in-out transform; } img { height: 3vw; width: 3vw; } .place { background: black; background: #360033; /* fallback old browsers */ background: -webkit-linear-gradient(to bottom left, #360033, #0b8793); /* chrome 10-25, safari 5.1-6 */ background: linear-gradient(to bottom left, #360033, #0b8793); /* w3c, ie 10+/ edge, firefox 16+, chrome 26+, opera 12+, safari 7+ */ }<body> <section class="place"> <h1>james trombo</h1> <a href="https://github.com/darkreaperrising"> <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on"> </a> <a href="https://www.instagram.com/james.trombo/"> <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on"> </a> <a href="mailto:jamestrombo@gmail.com"> <img class="cool" src="daquan.png" kasperskylab_antibanner="on"> </a> </section> <section class="aboutme"> <div class="lmao"> <p>hey internet people! i'm james , bunch of stuff code, play sports , sleep until 1. on main page there of links limited social media.</p> </div> </section> </body>
Comments
Post a Comment