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):
Now to your .titles element. I mentioned that container-fluid has 15px margin on each side. You can see that at the top here:
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:
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.
