Need HELP with my CSS code
I’m trying to finish up an assignment where I have to align 3 pictures, with borders, padding, and margins, in the center and side by side. This is my code below, can someone tell me what I’m doing wrong? <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title></title> <style> div.container { display:inline-block; } p { text-align: center; } li { display: flex; justify-content: center; } body{background-color:yellow} * { box-sizing: border-box; } .column { float: middle; width: 33.33%; padding: 15px; } .row::after { content: ""; clear: both; display: flex; justify-content: center; div { width: 200px; border: 80px solid turquoise; padding: 50px yellow; margin: 70; } </style> </head> <body> <div class="container"> <img src = "blueshoes.jpg" width="300" height="300" vertical-align: middle; /> <p> The picture above is of blue shoes. </p> </div> <div class="container"> <img class="middle-img" src ="orangehat.jpg" width="300" height="300" /> <p> The picture above is of a orange hat. </p> </div> <div class="container"> <img src = "linendress.jpg" width="300" height="300" /> <p> The picture above is of a beige linen dress. </p> </div> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
