Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
I’ll give ya a crash course in responsive images the pure css way 
Okay, so we can make a image both A.) fill its container and B.) be responsive by giving it 100% width and height and then controlling the size of it by its container element (I’m going by your current already set up classes):
.image {
background-color: white;
padding: 5px;
border-radius: 1%;
border: 1px solid lightgrey;
max-width: 850px; /* here we set our maximum size for our container element, you can make this as wide as you want of course */
margin: 0 auto; /* here we set the margins so our container is centered */
}
.image img{
width: 100%; /* here both width and height are set to take up the available space of our container */
height: 100%;
}
Now not only does our image fill its container, but as we shrink the browser window down, the image condenses along with the container.
Can you do this via bootstrap classes? Totally and you can check out this FCC guide on how to do it. But it doesn’t hurt to learn how to do it without frameworks before doing it with a framework.
Onto the bullet points. The thing about lists is that they by default have padding added to them which gives them their trademarked indented look. So we need to mess around with that styling. If we inspect the ul on your page, it looks like it has a built-in padding of 40px. Cutting that pixel amount in half lined it up with your other text content:
ul {
padding-left: 20px;
}
1 Like
Thank-you for your answers and one more question but how do I get a rid of that big white gap under “Arnold at a competition”.
That one is a pretty simple fix too. It’s another built in style but this time on the paragraph tag:
p {
margin-bottom: 0px;
}
By the way, if you ever want to check out what’s going on live underneath the hood of any website, all you have to do is run the browser’s development tools on it. Take a look at this guide from MDN on how to do that. You’ll be able to click on elements in the code and see what styles are effecting them. You can also turn styles on and off by checking and unchecking them, see what margins, padding, and width are on them, tweak pixel, percent, em, etc amounts without the risk of messing up the actual code. It’s ridiculously handy for debugging a site you’re working on.
For example I used it to check out the p tag under your image, which is where I found the bottom margin causing that space underneath.