Currently, I am trying to learn responsive design for mobile. The issue I am running into is that my images scale just fine when increasing browser size. However, they tend to go outside of the box which contains the text. I'll provide a picture so that you can see what the issue is.
If anyone has any ideas as to how to properly keep images inside divs when scaling that would really help! Thanks!
Also here is my Jsfiddle: https://jsfiddle.net/x1mn04p2/ (I put the img css on top and the rest of the site's css below that so that I could get the full look)
<h1> GCOM 366</h1>
<section class="clearfix" id="primary">
<img class="adjustable" src="weblogo" alt="example web page" width="300" heigh="300" style="float:right">
1. Learn industry standard programs
2. Build Portfolio
3. Increase collaboration skills
4. Become more creative
5. Understand good layout
6. Feel confident in HTML/CSS
margin: 1em 1em 1em 2%;
The image's right margin complicates everything. Remove it. Instead of it add a right padding to
.imgbox for example.