Issues with website project using Bootstrap framework

Hi Maximillane,

I think you will have to place whatever you are using to show your images outside of the container class to get it to span 100% of the screen, as anything within the container is restricted to the mac grid size.

(from what i can remember anyway)

The top black bar is overflowing the viewport and the yellow and black backgrounds look to be as well. There'll be some margin or border or padding that's blowing it up past 100% width.

Try to add a CSS rule for everything that sets box-sizing to border-box. It's really useful as padding and borders are contained within the element rather than adding to the elements width. So a 100px div with a 10px border stays at 100px, not 120px width.

Thanks for getting back to me. I really appreciate it.

Unfortunately, I still haven't solved it. The black bar at the top is bootstraps native nav bar.

Bootstrap suggest the following: Grids and full-width layouts Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.

I have tried putting that inside the main content area and leaving the page hero and container outside of it. But I still get a white stripe running down the right side of my page ...

Then I tried having everything inside the main container. I get the white stripe on the right side of the page.

Then I have tried leaving everything inside the main container and taking out the negative margin from the contact area and page hero, which leave everything nicely centered and gets rid of the horizontal scroll bar ... with a 15px white margin on both sides ...

Whatever I try another part falls appart ...

I still need help please.

I see the padding that you added to the main-container div is negative (0 -15px). Perhaps try making it a positive value instead (0 15px)? The negative value is already applied to the rows in the bootstrap CSS and needs to be offset by the positive value.

I have updated the site as far as I have gotten. the crux is the contact area not spanning the entire width. if anyone has any ideas how I can do that without breaking the entire site again that would be really helpful.

btw I will of course vote your answers once I have solved the last issue. so just a tiny bit of patience please.

The col-md-offset-1 applied to the Contact Us portion is causing the awkward indent on the left-hand side.

thanks Brian. you are right that the offset is probably no longer ideal. the problem that I am trying to fix though is that the black background isn't spanning the entire width of the page. but I need the content to be in a container to apply the rest of the formatting other than with the gallery block

The problem is you have a container inside your main container. the class .container has padding added to it of 15px left and 15px right in the bootstrap CSS. Try adding a custom class to that div in addition to the .container and reset the padding on each side to 0px in your custom CSS.

So here is the issue. I tried to reset the padding of the main container by adding a negative margin of -15px left and right to the div wrapping the entire contact area like I did for the jumbotron at the top. and ... that puts me exactly where I started from. with a horizontal scroll bar and a white strip on the right hand side.

and taking the contact area out of the main container breaks the layout too

I think I have it. Change the right and left margin of your #contact-container to -15px.

and no. i'm stumped.

Ok, Your #contact-container is inside your main content. Ive been changing your code and if i change the main-content class at the top of your custom css the #contact-container changes its width.

A fix to get rid of the white space down the side of #contact-container should be to go through your html and take the #contact-container out of the main-content. Even if you have to have another main-content after the #contact-container id. Hopefully that will work.

Hi Wayne,

thanks. I will try that. Keeping my fingers crossed.

I finally solved it. I am not entirely sure how, but I am not questioning it. There was a lot of adding and subtracting containers rows etc and in the end it finally came together. I will do a bit more editing before I upload the result, if any one is curious.

Two things that I learned in this process:

1. structural issues should be solved as early as possible because otherwise ... and
2. I was really happy to see that people did care about what is essentially my problem. So that was very positive and I think you guys are awesome!

I'm glad its all sorted Maximiliane. :)

Thank you! I really appreciate your help a lot. Not sure we I can't vote up answers. I contacted support about that. So hopefully you get at least some points :0)