html - Extra White Space On the Left Side of the Screen -
even though have removed padding , margin lower_content div, i'm still getting thin white space on left side of screen...it's there's invisible margin can't find anywhere. content reaches right side of screen fine, not left.
please, me find problem...
html:
<!doctype html> <html lang = "en"> <head> <title>my name here</title> <meta charset="utf-8"/> <link rel="stylesheet" href="styleforfullpage.css" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <div class="side_banner"> <nav> <ul> <li><a href="#" >home</a></li> <li><a href="about_me_fp.html" >about me</a></li> <li><a href="portfolio_fp.html" >portfolio</a></li> <li><a href="contact_me_fp.html" >contact</a></li> </ul> <hr/> </nav> </div> <div class="name_div"> <h1>my name here</h1> </div> <div class="lower_content"> <p>lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! <br/> lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! <br/> lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! lower content! </p> </div> </html> css:
@font-face { font-family: comfortaa; src: url(comfortaa-regular.ttf); } html { background: url(meandtheocean.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin: 0; padding: 0; } .side_banner{ /*font-family: tahoma, verdana, segoe, sans-serif;*/ font-family: comfortaa; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26.3999996185303px; background-color:transparent; float:left; height:100%; width: 150px; margin: 0% 2% 2% 0%; } .side_banner nav ul{ width: 100%; list-style: none; list-style-type:none; padding: 0; } .side_banner nav ul li{ } .side_banner nav a:link, .side_banner nav a:visited{ color: white; display:block; text-decoration: none; /*padding: 10px 25px;*/ padding: 10px; } .side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link, .side_banner nav .active a:visited{ text-decoration: none; background-color: orange; /*background-color: 1c6ba0;*/ text-shadow: none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .main_content{ float: left; margin: 1% 2% 2% 2% ; width: 70%; font-family: tahoma, verdana, segoe, sans-serif; color:white; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .name_div{ font-family:comfortaa; color: white; text-align: center; width: 300px; height:200px; position:absolute; left:50%; top:50%; margin:-110px 0 0 -150px; } .lower_content{ overflow: auto; position: absolute; top: 650px; width:100%; background-color:white; overflow-x:hidden; color:black; font-size:20; margin: 0% 0% 0% 0% ; padding: 0; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
the <body> has own margin of 8px default.
simply define rule
body{ margin:0; } or, stated in comments, use collective rule both body , html:
html, body{ … }
Comments
Post a Comment