Having limited experience with HTML and CSS, I'm encountering an issue with setting the width to 100%. It seems to exceed the browser borders. Can someone check out the example below? Should I slightly decrease the width percentage, or could there be flaws in my code causing this problem?
I've come across other posts discussing the 100% width, but none of them have provided much help. Here's the example I created: http://jsfiddle.net/gj53jbz9/
body {
font-size: 15px;
margin: 0px;
background-color: lightgrey;
}
#header {
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
}
#navbar {
float: right;
text-align: right;
}
#navbar a {
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey;
}
#title {
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px;
}
#content {
text-align: center;
width: 80%;
margin: 0px auto;
}<div id=header>
<div id=name>Name</div>
<div id=navbar>
<a href="page1.html">Link1</a>
<a href="page2.html">Link2</a>
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>