title: Twitter Widget is being distorted by css. How can I fix it
body: <p>I embedded a twitter widget on my website using their embed code. But after putting it on my web page the letters are too big and the size of it is all wrong.The Letters are too big and the styling of the widget is not proportioned.</p>
  
  <p>All of the styling information that is needed is actually in the javascript code. But it looks like something is overriding the styling and throwing it off. </p>
  
  <p>Here is the code for the widget.</p>
  
  <pre><code>   &lt;script src="http://widgets.twimg.com/j/2/widget.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 4,
    interval: 6000,
    width: 160,
    height: 300,
    theme: {
      shell: {
        background: '#333333',
        color: '#ffffff'
      },
      tweets: {
        background: '#000000',
        color: '#b68e59',
        links: '#cccccc'
      }
    },
    features: {
      scrollbar: false,
      loop: false,
      live: false,
      hashtags: true,
      timestamp: true,
      avatars: false,
      behavior: 'all'
    }
  }).render().setUser('BigNotch').start();
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the link to the page that it's on. <a href="http://notchtheguru.com" rel="nofollow">http://notchtheguru.com</a></p>
  
  <p>how can I fix this?</p>