ARTICLE AD BOX
I have three divs inside of a larger div, I want one to be at the left, the other at the center / middle of the container div, and the last one at the right of the container.
here is my index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width='device-width', initial-scale=1.0"> <link rel="stylesheet" href="./styles/style.css"> <title>Crazy Web Sandbox</title> </head> <body> <div id="hero-section"> <div id="left-section", style="border-color: blue;"> <h1>hi, I'm left section !</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br> Saepe provident eum dolor voluptate blanditiis perferendis molestiae!<br> Tenetur, praesentium aliquid!<br> Nemo voluptatem nobis eos! Quidem, incidunt.<br> Quod et nobis minima aut. </p> </div> <div id="middle-section", style="border-color: green;"> <h1>hi, i'm middle section !</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br> Saepe provident eum dolor voluptate blanditiis perferendis molestiae!<br> Tenetur, praesentium aliquid!<br> Nemo voluptatem nobis eos! Quidem, incidunt.<br> Quod et nobis minima aut. </p> </div> <div id="right-section", style="border-color: goldenrod;"> <h1>hi, i'm right section !</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br> Saepe provident eum dolor voluptate blanditiis perferendis molestiae!<br> Tenetur, praesentium aliquid!<br> Nemo voluptatem nobis eos! Quidem, incidunt.<br> Quod et nobis minima aut. </p> </div> </div> </body> </html>here is my ./styles/style.css file :
#hero-section { flex:1; border-style: solid; border-color: red; border-width: 5px; border-radius: 5px; } #left-section, #middle-section, #right-section { display: inline-block; border-style: solid; border-width: 5px; border-radius: 5px; }I've already tried to add margin-right:0; in the inline attributes of the style html argument in the opening of the div id='right-section'
