Positioning Problem

Hi Johnny,

Here's an educated guess on the problem with the fixed banner:

Give your fixed banner a width of 100%. Set the position to fixed. And then because of some quirks in inherited styling, tell it exactly where you want it fixed (for example, top: 0px or bottom: 0px). Here's one example:

.header {
    background-color: black;
    height: 100px;
    width: 100%;
    top: 0px;
    position: fixed;
    margin: 0 auto;
}

But, it has no reference to understand the width. It's set to 100% of what?

So one thing you can do is assign:

html {
 width: 100%;
}

There could be a couple different causes for your other problem. First guess is that your floating elements and things are collapsing on you? Maybe someone else can guess better than I can, but the best thing you can do is try putting your code into codepen ( at codepen.io) or jsfiddle ( at jsfiddle.net ) . And then post a link here so we can see what you're doing.

Hi Gary, thanks so much for the help!

Unless i'm missing something it seems i'm doing everything you said but the margin is still there!

Have added it the codepen as you recommended so you can hopefully see a little more clearly!

http://codepen.io/anon/pen/qEbpk

I changed the 'position' of the heading elements to 'static' and they have now separated, but the main heading 'Cycurl' is still stuck behind the banner. Also I don't know how to get the '3' to centre in the circle. Any ideas?

Just had another look and now 'cycurl' is appearing but it's border is spanning the width of the browser?!

How are you envisioning you want your banner to look? Also, what text should be inside the banner, and where should it be positioned?

Hi Gary, once again thanks so much for the help!

I'm trying to make the banner in a similar format to facebook. Putting the sitename 'Cycurl' on the far left side, followed by 3 circles, a search bar, another circle and then a profile name button.

Below that I was then trying to have the 'folders' section display vertically, each with a border. Is that tricky?

getting closer!

http://codepen.io/anon/pen/qEbpk

"Is that tricky?"

Sure. All it takes, though, is what you're doing, which is 'learn - practice - learn - practice' etc.

Firstly, no worries on the tiny bit of margin that's driving you nuts trying to get the banner to span all 100%. The cause is default styling that the browser puts in. You'll get rid of that by using a reset css sheet. I'd use normalize.css (which is a well-accepted alternative to a true reset.) Google normalize.css and copy-n-paste it, save it to your text editor. Link it to your html document just like you linked your other file; link normalize.css on the line BEFORE you link your file.

That's a start. Don't bother putting normalize into codepen,