Shutterbug - How do I get the phone centered?


#1

Hello, i'm doing the project Shutterbugg:
https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_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 (https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/index.html) 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="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
</div>
<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>
</div>


#2


#3

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


#4

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


#5

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:


#6

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


#7

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!