I'm facing an issue with adding margins and padding to my paragraph tag. This problem seems to be related to floating the img element to the left. I am trying to position the paragraph on the right side of the image while adding both left and right padding to the p tag so it doesn't overlap with the wrapper or the image.
<body>
<div class="wrapper">
<div class="section">
<img src="about.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus et neque non volutpat. Aliquam ut pharetra ante. Proin cursus aliquam posuere. Quisque vitae ligula a lectus feugiat elementum. Pellentesque sodales arcu sed tortor dapibus, ut ultricies nibh ultricies. Vivamus accumsan gravida hendrerit. Vivamus nec ornare velit, quis volutpat velit. Fusce consectetur sagittis metus, et molestie mauris consequat at. Cras fermentum, ligula at vestibulum eleifend, leo turpis cursus libero, non porttitor diam tortor eu turpis. Nulla sodales velit metus, sit amet consectetur leo dapibus vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 80%;
margin: 0 auto;
background-color: blue;
}
.section img {
float: left;
}
.section p {
padding: 0 40px;
display: inline;
text-align: justify;
}
.section:after {
content: "";
display: block;
clear: both;
}
EDITED
The paragraph block appears to start at the wrapper instead of next to the image Inspect in Developer Tool