Towards the end of the css code you will find the css responsible for displaying your Page Elements subtab under the Template tab.
Here is my Page Elements page before I modified the css :
Here you can see that there is no alignment of the elements. So I modified the code as follows :
/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #outer-wrapper {
padding: 0;
width: 1160px; /*<---Change this as per size of your #outer-wrapper*/ padding: 0 10px 0 5px;/*<-Change this as per padding of your #outer-wrapper*/ } body#layout #sidebar-wrapper {/*<--Change name as per name of your #sidebar-wrapper*/ padding: 0; width: 320px; /* <---Change this as per size of your #sidebar-wrapper*/ } body#layout #newsidebar-wrapper { /*<---Change name as per name of your #sidebar-wrapper*/ padding: 0; width: 170px; /* <---Change this as per size of your #sidebar-wrapper*/ } body#layout #main-wrapper { padding: 0; width: 535px; /* <---Change this as per size of your #main-wrapper*/ padding: 5px 10px 0 5px; /*<--Change this as per padding of your #main-wrapper*/ } body#layout #header-wrapper { padding: 0; width: 890px; /*<--Change this as per size of your #header-wrapper*/ } body#layout #footer-wrapper { padding: 0; width: 660px; /* <--Change this as per size of your #footer-wrapper*/ } /* End of Page structure tweaks for layout editor wireframe */
This caused the Page Elements page to show all the elements neatly lined together as seen here :
