Bootstrap / JS – Trying to adjust margin-top

[cscodismith]

I am working on a small project to work on but for some reason the content

.col-md-4
.col-md-8

I am trying to adjust the above class’ with a margin-top to get it to move away from the header but for some reason when I do so it moves the header along with it although I want the header to stay where it is and the content has some vertical room / space from the header.

You can view a codepen of the problem I am have here.

Best regards,
Codi

[Beverleyh]

In what way does it move the header? I’m not seeing the issue you describe – The header has a fixed position and remains in the same place with the same width and height. The green panel overlaps it until you add the margin line.

[Beverleyh]

Hmmm, your CodePen appears to have changed. It previously had this declared for .content;

    margin: 100px auto;

/* This line should move only the green .col-md-4 & .col-md-8
but it moves the header along with it!? */

But now it looks like this;

max-width: 65%;

/* This line should move only the green .col-md-4 & .col-md-8
but it moves the header along with it!? */

Have you updated?

[cscodismith]

I have added

.container

to a div in the body tag which is wrapped around everything and now I have fixed the issue I had at first but now all the elements are to the right of the screen as if I have a css set on them like

float: right;

but I do not. I’m not sure what the issue is now that is causing it to do such a thing.

[cscodismith]

Fixed this problem I am having. I had the bootstrap css element

.container

around the header as well – This made everything look VERY weird and when I removed the header outside of the

.container

I was then able to fix it and noticed that the header actually went the entire width of the screen. I updated my codepen here if you would like to see the sourcecode.

[Author]

Posts