Level up system problem

Hello there!

Right now I'm working on a level up system script but I've encountered a problem.

When I get XP, the XP bar moves outside the box (look at the image). When I'm level 1 it works fine, but when the XP amount increases when I'm level 2 or more the XP bar is acting strange.

It should be so when the amount of XP that is required to level up increases, the amount of XP that adds to the XP bar should look smaller, but now it adds the exact same amount (same width), so that's why It goes outside the box.

Does anyone know how to fix this problem?

Script

 var guiSkin : GUISkin;
 var levelTexture : Texture;
 var levelBGTexture : Texture;
 var levelUpSound : AudioClip;
 
 var currentXP : float = 0;
 var maxXP : float = 100;
 var level : float = 1;
 
 private var leveledUp : boolean = true;
 
 var GUIControllerScript : GUIController;
 
 
 function Update () 
 {
     if(currentXP >= maxXP)
     {
         levelUpSystem();
     }
     if(leveledUp)
     {
         leveledUp = false;
     }
 }
 
 function levelUpSystem ()
 {
     currentXP = 0;
     maxXP = maxXP + 50;
     level++;
     AudioSource.PlayClipAtPoint(levelUpSound, transform.position);
     leveledUp = true;
 }
 
 function OnGUI()
 {
     GUI.skin = guiSkin;
     GUI.depth = 0;
     
     if(GUIControllerScript.GUIOn)
     {
         GUI.DrawTexture(new Rect((Screen.width / 2) - 165, 20, 300, 30), levelBGTexture);
         GUI.DrawTexture(new Rect((Screen.width / 2) - 165, 20, 3 * currentXP, 30), levelTexture);
         GUI.Box(new Rect((Screen.width / 2) - 165, 20, 300, 30), currentXP + "/" + maxXP, "level");
         GUI.Box(new Rect((Screen.width / 2) - 335, 20, 300, 30), level + "");
     }
 }