How to correctly align fixed header fully to top and left in CSS


Tags: html,css,header,alignment

Problem :

So I have come across a problem when I tried aligning my header design fully to the top margin and the left margin. The use HTML and CSS to perform this. CSS code:

div#headerbox
{
background-color: #a56868;
width:100%;
height: 40px;
position: fixed;
display: block;
margin-top: 0px;
margin-left: 0px;
}

div#headerwrap
{
background-color: #a56868;
width:100%;
height: 40px;
position: fixed;
display: block;
}

HTML code:

<div id="headerbox">
    <div id="headerwrap">
        <p>TEST 123</p>
    </div>
</div>

Why doesnt this code align properly to the edges on both sides as I have put the lenght of the element to be 100%? and how can I fix this?

Current look



Solution :

Set the padding and margin of HTML body in CSS to zero.

body {
   margin: 0;
   padding: 0;
}

    CSS Howto..

    how to set an element at fixed relative position in html rendering.? [closed]

    Angularjs: How to *retrieve* css property from element in directive?

    How can I add CSS to a form in Rails when the form is rendered in two different locations?

    How to use text-overflow properly to format text?

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    Why do menu bullets show up on my menus?

    How to make a foreground image using CSS?

    How to override CSS style assigned to element

    How do i get a font to show up smooth like this?

    how decrease font size?

    How to prevent line breaks in list items using CSS

    How to change the background color of a line of user input in a textarea?

    How can I set inline css styles for an element with javascript?

    How to center my navigation using .css

    how to make a text ele to the right of a left floated ele automatically occupy the rest width?

    how to convert inline CSS into external CSS?

    How to fix header cannot sticky in wordpress?

    How to use HTC behavior in jQuery CSS for IE?

    How to replace a specific text in CSS? [duplicate]

    How to Center CSS Tabs

    How can I create a searchbar like this?

    How to wrap an div with another div - jQuery Wrap

    How to test .css file for syntax errors?

    How to edit a css file in ASP.NET using C# to change the website design

    How do I make a table's columns fill the width not occupied by fixed-width columns?

    How to add Get in Touch page in webpage? [closed]

    How to exclude an HTML element form Ionic CSS

    dynamic drop down how to show success using css (tic icon)

    How can i overlay an 10x10px image on top of another image?

    How can I make a span stretch the available space between to other spans?