How to center already aligned <ul> element?

Hello,
please check my code pen. I am building tribute page. Can you tell me how to align the text equally to the left side of the list’s dots?
So far I’ve used

h3 {
  text-align: center;
  
  
}

ul {
  display: inline-block;
  display: center;
  
}

mro

You used display: center; instead of text-align: center;. You must delete display: inline-block

1 Like

But when I do that, that happens:

ul {
  
  text-align: center;
}

Umm… Isn’t that what you wanted?

I’d like each line to be lined equally vertically like this:
idlikethem

Ah sorry… I didn’t read the whole message… just change text-align: center; to text-align: left;.

1 Like

Ah, it is always so simple… lol
Thank you sir

One more thing. How to make the img element resize responsivey to the browser window’s size?

I’ve tried:

img {
  height: 700px;
  width: 550px;
  display: inline-block;
  max-width: 100%;
  
}

but I still get error:

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Use the “display” style property with a value of “block” for responsive images.: expected ‘inline-block’ to equal ‘block’ AssertionError: Use the “display” style property with a value of “block” for responsive images.: expected ‘inline-block’ to equal ‘block’

Just add the class img-responsive to your img.

Still got passed 9 of 10 tasks

<img id="image" class="img-responsive" src="https://scontent-waw1-1.xx.fbcdn.net/v/t1.6435-9/105983605_3267490073475187_4585763948474051614_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=730e14&_nc_ohc=1Sjk4shMFCgAX9ViyfM&_nc_ht=scontent-waw1-1.xx&oh=00_AT_Gi7vyhEA6oCmUTryldn73KN8ZfBE_YAv_1g74C2kEDw&oe=6215A50C" alt="Chris Bumstead photo"></img>

Also funny thing: when I launch tribute page in full size (not in editor) the unordered list’s lines are not aligned to the left of those dots…

look please:

In the editor all looks fine in the preview

  1. Add id= “main” to your <main> tag.

Sorry, my parents don’t let me look at laptop anymore… I’m really sorry…

No problem Stefan, let me know later

Hello,
I’m stuck at 9/10 points in tribute page test.

I’m getting error about responsive img resize.
This is my codepen

and full size: https://codepen.io/bartosz-spychaa/full/VwrYqzw

How do I repair the

  1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Use the “display” style property with a value of “block” for responsive images.: expected ‘inline-block’ to equal ‘block’ AssertionError: Use the “display” style property with a value of “block” for responsive images.: expected ‘inline-block’ to equal ‘block’ error?

Umm… I can see that you have passed 5/10 tests but…
For image: delete the width: auto\9; /* ie8 */. Then, add display: block and margin-(left / right) and set them to auto.

did you choose tribute page test?
tribytega

I think the pen didn’t autosave, check now please.

So right now it is:

img {
  height: 50%;
  width: 50%;
  max-width: 100%;
  display: block;
  margin-right: auto;
  margin-left: auto;
    
  
  
  
  
}

and still 9/10 points :frowning:

Ok, I added:

}

.img-responsive {
  width: 100%;
  height: auto;
}

and got 10/10

Last thing, because now the picture is wayyyy to big. How to make it smaller without losing responsive resize value?

Your code should look like that:

img {
  height: auto;
  width: 400px;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}

Try to copy+paste that⏫ and delete .img-responsive. (img-responsive is a bootstrap class that makes the images responsive…)