#topnavbar {
            width:100%;
            padding:0;
            border:1px solid gray;
            margin:0; }

        #topnavbar p {
            margin:0; }

        body {
            margin-left:auto;
            margin-right:auto;
            margin-top:0;
            width:1024px; }

That's my code. How do you have it to achieve the bar(that is named topnavbar) to suit the entire screen without overflowing? And I'd rather not do overflow:hide; or whatever.

You mean fit the entire width from the screen?

Paradoxally, you need to simply remove width:100%(the edges are now being included in this value...)

EDIT: Company, Kai Qing is appropriate, too - I skipped that. Should you put width 1024 in your body, your navbar is going to be 1024, too...

Your css is a touch off:

#topnavbar {
   width:100%;
   padding:0;
   border:1px solid gray;
   margin:0; 
}

#topnavbar p {
   margin:0; 
}

#container{
    width:1024px;
    margin: 0 auto;
}

body {
   /* you do not need any of your css here */
}

html:

<body>
    <div id="topnavbar">
        <p>Some text</p>
    </div>
    <div id="container">
        whatever you want to center
    </div>
</body>

the fundamental idea would be to width 100% a component who doesn't have a parent or gaurdian after which apply your centering container beneath it. Within this situation, #container.

Your css was using a width towards the body and for that reason it had been likely playing your whole layout.