i can spell html5! Posted January 18, 2021 Share Posted January 18, 2021 I'm following along with the video in title but the "boxes" section with the three images are spaced WAY to far apart. been working on it several days now and cant seem to straighten it out. my html: <section id= "boxes"> <div class="container"> <div class="box"> <img src="9.jpg" <h3>html5 markup</h3> <p>this is some random text:</p> </div> <div class="box"> <img src="9.jpg" <h3>css 3</h3> <p>what am i really tring to do here?><:</p> </div> <div class="box"> <img src="9.jpg" <h3>graphic design</h3> <p>iim not so great with this html stuff</p> </div> </div> </section> and my css: #boxes{ margin-top:20px; } #boxes .box{ float:left; text-align: center; width:30%; padding:10px; } #boxes .box img{ width:90px; } tried to make the images larger but nothing i do seems keep anything straight and i copied the code exactly i beleive. any suggestions Link to comment Share on other sites More sharing options...
niche Posted January 18, 2021 Share Posted January 18, 2021 (edited) Try removing the section tag Edited January 18, 2021 by niche Link to comment Share on other sites More sharing options...
melahi Posted February 17, 2021 Share Posted February 17, 2021 (edited) I'm not entirely sure what you are trying to do, but there are several errors in your HTML. Here is how I would rewrite it. Feel free to ask for explanations if you don't understand. Also you can submit your HTML to the w3 validator... it's here: https://validator.w3.org/nu/#textarea <!DOCTYPE html> <html style="background-color:#C0C0C0;padding:0;margin:0" lang="en"><head> <style> body { margin:20px auto 20px auto; color:red; max-width:40em; } #boxes { height:auto; overflow:auto; background-color:white; } #boxes .box{ float:left; text-align: center; width:30%; padding:10px; } #boxes .box img{ width:90px; } </style> <title>HTML test</title> </head><body><section id="boxes"> <div class="container"> <div class="box"> <img src="9.jpg" alt=""> <h3>html5 markup</h3> <p>this is some random text:</p> </div> <div class="box"> <img src="9.jpg" alt=""> <h3>css 3</h3> <p>what am i really tring to do here? ><:</p> </div> <div class="box"> <img src="9.jpg" alt=""> <h3>graphic design</h3> <p>I'm not so great with this html stuff</p> </div> </div> </section></body></html> Edited February 17, 2021 by melahi Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now