How to cause the Pages gadget to not stretch across the width of the page

With my particular Blogger template, the pink "Pages" gadget originally stretched across the top of the page like this:

I didn't really like this, so I found this great tutorial on how to make it stretch only across the width of my actual postings (as the page looks now). 


This is taken from:
http://www.southernspeakers.net/2011/01/blogger-pages-gadget-no-stretch.html



Place the following code directly above "HEADINGS" in your HTML: 

/*--Pages Gadget No-Stretch Starts--*/

.tabs-outer {

background: transparent !important;

}

.cap-top, .cap-bottom{

border: none !important;

}

.tabs-inner .widget li a{

border: none !important;

border-right: 1px solid $(tabs.border.color) !important;

}

#crosscol{

background: $(tabs.background.color) $(tabs.background.gradient);

border: 1px solid $(tabs.border.color) !important;

}

/*--Pages Gadget No-Stretch Ends--*/

/* Headings
----------------------------------------------- */

• 
• 
• 
• Tweet

CHICKY GROOVY COOLNESS GADGET