title: Having trouble with <wbr> and image scaling
body: <p>I'm trying to make a page with text floated left and the image floated right. I accomplished that, but my webpage images and text need to be able to properly resize.  and width in css aren't working for me, unlike in my home page, so I was wondering if anyone could fix it.</p>
  
  <pre><code>&lt;section&gt;
      &lt;div id="right"&gt;
          &lt;img src="../img/placeholder.png" alt="Photo of --"&gt;
          &lt;p&gt;--&lt;/p&gt;
      &lt;/div&gt;
      &lt;p id="left"&gt;Web and Graphic Designer beginner,&lt;wbr&gt;blah blah.&lt;/p&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>and the css (I included all of it just in case, but the most relevant part is the bottom PAGE PORTFOLIO):</p>
  
  <pre><code>/*ABOUT CSS*/
  
  /*GENERAL*/
  
  body {
  
  }
  
  ul {
      list-style: none;
  }
  
      /*section*/
  section {
      max-width: 940px;
      font-family: 'Open Sans Condensed', sans-serif;
      font-weight: 300;
      margin: 0 auto;
      padding: 0;
      color: gray;
  }
  
      /*all styling*/
  * {
      background-color: #f2f2f2;
  }
  
      /*all links*/
  a {
      text-decoration: none;
      font-family: 'Open Sans Condensed', sans-serif;
      font-weight: 300;
      color: gray;
  }
  
      /*visited links and hover links*/
  a:visited   {
       color: #838383;
  }
  
  a:hover {
      font-size:105%;
  }
  
  /*HEADING*/
  
      /*header*/
  h1 {
      text-align: center;
      font-family: 'Open Sans Condensed', sans-serif;
      font-weight: 700;
      line-height: 0.5em;
      color: #8c8c8c;
      width: 100%;
  }
  
      /*subhead*/
  h2 {    
      text-align: center;
      font-family: 'Open Sans Condensed', sans-serif;
      font-weight: 700;
      color: #8c8c8c;
      width: 100%;
  }
  
  /*NAVIGATION*/
  
  nav {
      text-align: center;
      padding: 10px 0;
  }
  
      /*horizontal nav*/
  nav li {
      display: inline;
  }
  
  nav a {
      display: inline-block;
      padding: 2% 2%;
  }
  
  /*FOOTER*/
  
  footer {
      font-size:0.75em;
      text-align: center;
      clear: both;
  }
  
      /*social media*/
  footer {
      text-align: center;
      margin: 0 5px;
      padding: 15px 15px;
  }
  
  #twitter img {
      width: 46px;
      height: 37px;
      margin: 0 auto;
      padding: 15px 15px;
  }
  
  #facebook img {
      width: 40px;
      height: 40px;
      margin: 0 auto;
      padding: 15px 15px;
  }
  
  /*PAGE PORTFOLIO*/
  
  #right {
      float: right;
      width: 40%;
      height: 40%;
  }
  
  #left {
      float: left;
  } 
  </code></pre>