Shutterbug - How do I get the phone centered?


Hello, i'm doing the project Shutterbugg:

I just added the below code (step 3 in the project) and when I display the page I see the picture of the phone (on the left) + text. However, on the example website ( the phone picture is centered/has space on the left side of the picture. How do I get the same result in the project?

My code in HTML:

<div class="col-md-6">
<img src="">
<div class="col-md-6">
<h1> Share </h1>
<p>Share your moments with the people who matter to you most. With Shutterbugg, it's easy to share with the right people.</p>



style tags with either float:auto or text-align:center


possible values for float:

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

from MDN-float

@angela_2389, i am looking into the issue, will be with you in a minute


Thanks, I'm aware of those codes, but I'm just lost in where to place them exactly in this case. If you can give me any example it would be great :slight_smile:


But there isn't that much space on the left side of the image? Just a little bit from the col-md-6?

Did you open your code full screen? The small preview window in the lesson is to small for the col-md to work. If problems, persist, could you copy paste your full html + css code to the forum

Sloppy me, again. The container need a certain width to work, not the col-md. This is what is causing the gap


Your last comment actually solved my problem...
I didn't put the code to 'container' but directly under 'section'. In the 'container' div it works as in the example.

Thanks for your help!