Better alignment of detail page attributes

resources/public/css/screen.css

@@ -16,3 +16,7 @@
 .detail-image a {
   display: block;
   text-align: center; }
+
+#detail-attributes {
+  max-width: 1024px;
+  margin: auto; }

resources/scss/screen.scss

@@ -21,3 +21,8 @@
     text-align: center;
   }
 }
+
+#detail-attributes {
+  max-width: 1024px;
+  margin: auto;
+}

resources/templates/detail.html

@@ -43,8 +43,10 @@
     <img class="card-img-top" src="/images/normal/{{ image.hash }}" alt="{{ image.title }}"/>
   </a>
 </div>
-{% ifequal identity ":creator" %}
-<div class="btn-group pull-right clearfix" role="group">
+
+<div id="detail-attributes">
+  {% ifequal identity ":creator" %}
+  <div class="btn-group pull-right clearfix" role="group">
     <a class="btn btn-primary btn-sm" href="/edit/{{ image.id }}">
       <span class="fa fa-pencil"></span>
       Bearbeiten
@@ -53,17 +55,17 @@
       <span class="fa fa-trash"></span>
       Löschen
     </a>
-</div>
-{% endifequal %}
+  </div>
+  {% endifequal %}
 
-<p>{{ image.created_at|parse-date|date:"dd.MM.yyyy, HH:mm" }} Uhr</p>
-{% if image.description|length > 0 %}
-<div class="col-md7">
+  <p>{{ image.created_at|parse-date|date:"dd.MM.yyyy, HH:mm" }} Uhr</p>
+  {% if image.description|length > 0 %}
+  <div class="col-md7">
     <p>{{ image.description|markdown-to-html|safe }}</p>
-</div>
-{% endif %}
+  </div>
+  {% endif %}
 
-<ul class="list-unlisted">
+  <ul class="list-unlisted">
     {% for comment in comments %}
     <li class="media mb-3">
       <a name="{{ comment.id }}"></a>
@@ -77,9 +79,9 @@
       </div>
     </li>
     {% endfor %}
-</ul>
+  </ul>
 
-<form action="/add-comment/{{ image.id }}" method="POST" class="form-horizontal">
+  <form action="/add-comment/{{ image.id }}" method="POST" class="form-horizontal">
     {% csrf-field %}
 
     <div class="form-group">
@@ -99,6 +101,6 @@
       <span class="fa fa-floppy-o"></span>
       Kommentar hinzufügen
     </button>
-</form>
-
+  </form>
+</div>
 {% endblock %}