Fix spacing between button and selected areas

Adding left margin to the button meant that when it wrapped onto a new
line it didn’t align flush with the left edge of its containing column.

Instead we can:
- move the link outside the list (which is better semantically anyway)
- then add the margin to the last item of the list (which is now the
  last selected area, not the link)

app/assets/stylesheets/components/area-list.scss

@@ -55,6 +55,10 @@
 
     }
 
+    &:last-child {
+      margin-right: govuk-spacing(1) * 1.5;
+    }
+
     &--unremoveable {
       padding-right: govuk-spacing(2);
       background: $light-blue-25;

app/templates/views/broadcast/preview-areas.html

@@ -82,13 +82,13 @@
           {{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">remove</a>
         </li>
     {% if loop.last %}
+      </ul>
       {{ govukButton({
         "element": "a",
         "text": "Add another area",
         "href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
         "classes": "govuk-button--secondary govuk-!-margin-bottom-5"
       }) }}
-      </ul>
     {% endif %}
   {% else %}
     <p class="govuk-body">