Guess I'm pretty stuck.

So here's what I got visually right now.

[![enter image description here](https://i.stack.imgur.com/FUzgM.png)](https://i.stack.imgur.com/FUzgM.png)

I added that comic sans caption and the arrow in MS paint. 

Each of those lines containing the color swatches is a `p` tag. Ideally, I want these `p` tags to be put in the center of the page (which is how they are positioned by default in *jspsych*). However, I also want all of these tags to be aligned to the left. I still want the `p` tags in the center, but I want to make it so that each line of text starts at the same `x` coordinate.

[![enter image description here](https://i.stack.imgur.com/Y6I3f.png)](https://i.stack.imgur.com/Y6I3f.png)

The above screencap is what I want ideally. Things are centered, but these swatches/p tags still start off at basically the same x coordinate.

So the code I currently have for the page I'm debugging on (the first screencap) is the following. Note that the one image loaded has the path of `/static/images/test.png`, you can just replace that with whatever you want to. The javascript file is called `debugjspsych.js`, ad the html is `debug.html`

Javascript:

```

timeline_arr = [];

    var instructions2 = {
        type: "html-keyboard-response",
        choices: 13,
        stimulus: function() {

        var example_stimuli_html =  "<div style='width:800px;height:200px;margin:0 auto;'>" + "<div style='float: left;margin-left:200px; margin-top:43px;'><p style='font-size:14px;'>"  + "</p><img src='Neuroethics_Behavioral_Task/static/images/test.png' style='width:150px;height:95px;'></img><p class='small'><strong>Option 1</strong></p></div>" + 
        "<div style='float:right;margin-right:200px;'><div style='width: 150px; height: 95px; border: 3px solid #000000; font-size:12px; background-color: grey;margin-top:44px;'><p style='text-align: center; margin-top:25%;'>No treatment</p></div><p class='small'><strong>Option 2</strong></p></div>" +
        "</div>" + "</div>";
         return "<p>Some words go here. Look at these rectangles. Pretty rad, right?</p>" + 
          example_stimuli_html
          + "<p><br>...Then at the relative amounts of <b><font color='gray'>gray</font></b>, <b><font color='#4169e1'>blue</font></b>, and <font color='#ed713a'><b>orange</b></font> in the trial.</p>" +
          "<div style='margin: auto 0;'>" + 
              "<p align='left'><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div><b>Worsens</b> the deficit.</p>" + 
              "<p align='left'><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Has <b>no effect.</b></p>" + 
              "<p align='left'><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div><b>Cures</b> the deficit.</p>" + 
          "</div>"
          "<p>You should click the <b>\'z\' key</b> to pick Option 1, and the <b>\'m\'</b> key to pick Option 2. Sometimes the treatment will be on the left, and sometimes it will be on the right.</p> \
          <p>In any case, your task is always to choose between the two Options- to give the  treatment or not. Sometimes it will seem like the choice is more or less obvious. However, do your best  \
          to make what you think is the <i>best</i> choice in each case. There is no time limit for each treatment, but there will be many, so please do your best to make\
          good choices as quickly as you can without spoiling your response.</p>"
        },
        prompt: "Press any key to continue."
    };
    timeline_arr.push(instructions2);

     jsPsych.init({
        timeline: timeline_arr,
    });

```

```
<!DOCTYPE html>
<html>
    <head>
        <title>Debug JsPsych</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/jspsych.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/plugins/jspsych-html-button-response.js"></script>
        <link href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/css/jspsych.css", rel="stylesheet" type="text/css">
        <script src="debugjspsych.js"></script>
    </head>
    <body>

    </body>
</html>

```

The last code snippet I'm going to include is the code for the idealized screencap.

```
ideal_trial_obj = {
type: 'html-keyboard-response',
stimulus: function() {
return  "<div style='margin:auto 0;top:0px;margin-top:50px;text-align:left;'>" + "<p align='center'>" + "Domain: <strong>" + condition_var + "</strong>" + "<br>Chance that the treatment...</p>" + 
              "<p><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div><b>Worsens</b> the deficit. The person becomes <b>unable</b> to sustain and switch focus at all.</p>" + 
              "<p><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Has <b>no effect.</b> The person <b>still</b> has some trouble maintaining and switching focus.</p>" + 
              "<p><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div><b>Cures</b> the deficit. The person becomes <b>able</b> to sustain and switch focus as needed</p>" + 
              "</div>" + 
              jsPsych.timelineVariable('stimulus', true);
}

```

I ommitted a lot of parts to the above code snippet just because I didn't feel they were relevant. All that's really important here is that I'm able to use `margin: auto 0;` to get the behavior I desire for that trial object. But I can't seem to do it in the example.