The location bar and the search bar both have a flex attribute that makes then take all available space.
The Bookmarks Toolbar folder items probably have a minimum width that can just take one bookmark with its maximum label length (in your case two icons).

You can set the max-width of the location bar and the search bar to force a maximum width of both bars. Setting a minimum width for the Bookmarks Toolbar items will probably work as well.

Add code to the userChrome.css file below the default @namespace line (adjust the width to suit your needs).

• http://kb.mozillazine.org/userChrome.css

The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.

• http://kb.mozillazine.org/Editing_configuration

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#urlbar-container { max-width: 400px !important; }
#search-container { max-width: 200px !important; }

You can use this code to set a minimum width for the bookmark toolbar items if you want to experiment with that.
You may need to set a max-width as well.

#personal-bookmarks { min-width: 200px !important; }

This solved the problem, thank you!

Hey again! I just installed the latest version of Firefox since I have a new computer.

I tried to do this again but failed. I can't find the chrome folder. I googled some and found out you could create it yourself in the "Default profile". I can't really find that profile. I'm using Firefox 17.0.1.

Also inside AppData there are three folders: Local, Locallow and Roaming. There are Firefox folders in all of these. I tried making a chrome folder just inside the randomhashtag.default folder but it didn't seem to work.

EDIT: I was mistaken, I had NOT made a chrome-folder in the Roaming subfolders. It works if you put the Chrome-folder in the folder %APPDATA%/Roaming/Mozilla/hashtag.default

Hopefully my mistake will bring some clarity to other searchers.

Any idea on where to put the userChrome.css and the chrome folder?

You can use this button to go to the Firefox profile folder and create the chrome folder in that folder.

• Help > Troubleshooting Information > Profile Directory: Show Folder

I have a side question, not sure if I'm to ask it here or make a new question.

But when I have changed the width of the bars.. my "Save passwords" checkbox becomes unavailable and firefox doesn't keep me logged in to any websites. If I close the tab, I get logged out. I realize this is a safety measure but is there anyway to have custum sized bars AND be able to save passwords?

What do you mean with "Save passwords" checkbox?

Is that box provided by an extension?

Can you attach a screenshot?

• http://en.wikipedia.org/wiki/Screenshot
• https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem

Use a compressed image type like PNG or JPG to save the screenshot.

Websites remembering you and automatically log you on is stored in a cookie.

• Create an allow cookie exception (Tools > Options > Privacy > Cookies: Exceptions) to keep such a cookie, especially for secure websites and if cookies expire when Firefox is closed.

Make sure that you do not run Firefox in Private Browsing mode.

• https://support.mozilla.com/kb/Private+Browsing

Do not use Clear Recent History to clear the "Cookies" and the "Site Preferences"

• https://support.mozilla.com/kb/Clear+Recent+History

Clearing "Site Preferences" clears all exceptions for cookies, images, pop-up windows, software installation, and passwords.

Hi, it was the private browsing option that made the save password setting box unavailable. Somehow I got the Swedish version installed and it just say "Don't save history" instead of private browsing so I thought passwords would still be savable.

Thanks alot for your help! I am very greatful.

You're welcome