title: Easy Problem: CSS in DMs on a social media site not displaying correctly
body: <p>Within the DM function on my social media platform I would like the received messages to appear on the left hand side and the sent messages to appear on the right hand side. Currently it is the other way round: <a href="https://i.stack.imgur.com/qGDDP.png" rel="nofollow noreferrer">https://i.stack.imgur.com/qGDDP.png</a></p>
  <p>(Sent messages (light pink) = #D7A5EB, received messages (dark pink) = #CC64C3)</p>
  <p>Ì have been trial-and-erroring this for a while now, but it simply refuses to allow sent messages (I.e. the ones that the currently logged-in user sent) on the right hand side.</p>
  <p><code>thread.html:</code></p>
  <pre><code>{% extends 'landing/base.html' %}
  {% load crispy_forms_tags %}
  
  {% block content %}
  
  &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;card col-md-12 mt-5 p-3 shadow-sm&quot;&gt;
              {% if thread.receiver == request.user %}
                  &lt;h5&gt;&lt;a href=&quot;{% url 'profile' thread.user.profile.pk %}&quot;&gt;&lt;img class=&quot;rounded-circle post-img&quot; height=&quot;50&quot; width=&quot;50&quot; src=&quot;{{ thread.user.profile.picture.url }}&quot; /&gt;&lt;/a&gt; @{{ thread.user }}&lt;/h5&gt;
              {% else %}
                  &lt;h5&gt;@{{ thread.receiver }}&lt;/h5&gt;
              {% endif %}
          &lt;/div&gt;
      &lt;/div&gt;
  
      {% if message_list.all.count == 0 %}
      &lt;div class=&quot;row my-5&quot;&gt;
          &lt;div class=&quot;col-md-12&quot;&gt;
              &lt;p class=&quot;empty-text&quot;&gt;No messages yet.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      {% endif %}
  
      {% for message in message_list %}
      &lt;div class=&quot;row&quot;&gt;
          {% if message.sender_user == request.user %}
          &lt;div class=&quot;col-md-12 my-1&quot;&gt;
              {% if message.image %}
              &lt;div class=&quot;message-sender-container ms-auto&quot;&gt;
                  &lt;img src=&quot;{{ message.image.url }}&quot; class=&quot;message-image&quot; /&gt;
              &lt;/div&gt;
              {% endif %}
              &lt;div class=&quot;sent-message my-3&quot;&gt;
                  &lt;p&gt;{{ message.body }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
              {% elif message.receiver_user == request.user %}
              &lt;div class=&quot;col-md-12 offset-6&quot;&gt;
                  {% if message.image %}
                  &lt;div&gt;
                      &lt;img src=&quot;{{ message.image.url }}&quot; class=&quot;message-image&quot; /&gt;
                  &lt;/div&gt;
                  {% endif %}
                  &lt;div class=&quot;received-message my-3&quot;&gt;
                      &lt;p&gt;{{ message.body }}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              {% endif %}
          &lt;/div&gt;
      {% endfor %} 
  
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;card col-md-12 p-3 shadow-sm&quot;&gt;
              &lt;form method=&quot;POST&quot; action=&quot;{% url 'create-message' thread.pk %}&quot; enctype=&quot;multipart/form-data&quot;&gt;
                  {% csrf_token %}
                  {{ form | crispy }}
                  
                  &lt;div class=&quot;d-grid gap-2 mt-3&quot;&gt;
                      &lt;button btn btn-light type=&quot;submit&quot;&gt;Send Message&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  {% endblock content %}
  </code></pre>
  <p><code>style.css:</code></p>
  <pre><code>.empty-text {
          color: #777;
          font-size: 1.5rem;
          text-align: center;
  }
  
  .sent-message {
          background-color: #d7a5eb;
          border-radius: 30px;
          padding: 10px 25px;
          width: 35%;
  }
  
  .received-message {
          background-color: #cc64c3;
          color: #000;
          border-radius: 30px;
          padding: 10px 25px;
          width: 35%;
  }
  
  .message-sender-container {
          margin-left: auto;
          margin-right: 0;
  }
  
  .message-image {
          border-radius: 10px;
          max-width: 35%;
          height: auto;
  }
  </code></pre>