(Click to enlarge)

I believe I fixed this last week.

As for breadcrumbs, if fixed width is off there's more space so the CSS is coded to put them side-by-side with title.

It's always been tricky as what is best really depends on the site, if it has panels, the length of titles, the breadcrumb depth.

In global.css

.global_breadcrumbs {
padding: 7px 0 7px 0;
/*{+START,IF,{$NOT,{$MOBILE}}}*/
/*{+START,IF,{$CONFIG_OPTION,fixed_width}}*/
text-align: {!en_right};
/*{+END}*/
/*{+START,IF,{$NOT,{$CONFIG_OPTION,fixed_width}}}*/
float: {!en_right};
/*{+END}*/
margin-left: 0.5em;
/*{+END}*/
}

change to

.global_breadcrumbs {
padding: 7px 0 7px 0;
/*{+START,IF,{$NOT,{$MOBILE}}}*/
text-align: {!en_right};
margin-left: 0.5em;
/*{+END}*/
}

Ahh okay, that makes sense. Well the other thing I wanted to mention is the idea of sectioning the breadcrumbs using the colon. So basically anything that appears after the : is not included in the breadcrumb. So if a page was called 'Tutorial 1: How to manually edit breadcrumbs', you would just see Tutorial 1 in the breadcrumbs.

You can do with a couple of template changes.

Templates:
BREADCRUMB_LINK_WRAP, BREADCRUMB_LONE_WRAP

{LABEL*}
-->
{$PREG_REPLACE,:.*$,,{LABEL*}}

I wouldn't want to do by default. People may have multiple pages in a hierarchy sharing a prefix intentionally.

I wouldn't have realised that such a simple change would do this. Thanks.