Container row doesn't fill full width of page

Container row doesn't fill full width of page
0
#1

Hi guys,

I’m currently getting through lesson 112, ‘Build a Personal Portfolio Webpage’. I am trying to build a navigation bar but there seems to be some white space on the right hand side. I’m confused because the placement within the container-fluid <div> seems correct, and the CSS is very similar to other elements that do fill the page. I’ve been staring at the code for hours now and I have no idea what’s going on. Any help would go far. Here is the Codepen link.

While using Bootstrap, I have stuck to using medium columns. I’m not sure if this could have any impact. I’m doing that only because I don’t 100% know what I’m doing, so consistency seems like a good idea.

#2

Remove 100% with on #navbar. It will automatically stretch, you don’t need to have that in there.

#3

Solution worked perfectly, thanks.

#4

@IsaacAbrahamson why does the same not seem to apply to the .title class? Should I use padding instead of width?

#5

You can look at it in developer tools to see what is going on and you need to add/remove. To be technically specific, container-fluid is 100% width, but has 15px of margins on the sides. You can see this on your #navbar if you add back the margin: 0 auto; to center it (I’ve highlighted):

hX3dBvZ5Qgycq6t_zqz3eg.png1120x70 1.76 KB

Now to your .titles element. I mentioned that container-fluid has 15px margin on each side. You can see that at the top here:

awdawdadawda.png1133x238 12.6 KB

You will notice that the rows are full width however. They do this by having a -15px margin on each side. This is just the way Bootstrap works. Containers have 15px on each side, and to counter this rows have -15px so they are full width. Now, when you get to your .titles row you have a problem. First off, to answer your one question, you should use 100% width if needed - don’t use padding to center elements. Ok, back to the problem with this element:

J_nHH9O6TBKB4l94rToz6Q.png1120x137 2.37 KB

I took away your padding 40% and gave it width 100% that it needs. It is not centered however, because there is 15px of empty space on the side. You remember that I said rows have -15px padding? You have a row inside a row. You can never have a row inside another row because it will do stuff like this. Your first row is full width, but your nested row, the .titles doesn’t account for this and tries to have -15px padding which causes this shift. You will have to have your portfolio titles row in a whole new container-fluid for it to work properly.

I hope this makes sense. If not, just remember that rows have negative paddings to make them work with containers. If you have a row inside another row, your paddings will therefore be off.

Edit: I see you deleted your post, I’ll leave the answer as it still may be helpful. If you want, I can edit your question out of my answer.

#6

I’ve created some confusion. I actually solved the .title problem, hence deleting the post. I realised it was indeed sitting in another row, which was completely accidental. I cleared that up and gave it left and right padding of 30%, which looked great. However now I have read your advise about not using padding to create width, I am back where I was, albeit with cleaner code. I will give it a go with a new container-fluid. Please don’t delete the answer, it’s a good one that I will keep for constant reference.