title: Please help resize and move logo on my website
body: <p>My website is georgiantoast.com</p>
  
  <p>When I run it from of my desktop the logo is the appropriate size and fits neatly into the upper left corner. However, when I upload index.html to my hosting service it balloons to the entire page. This is the code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header page-scroll"&gt;
              &lt;button type="button" class="navbar-toggle" data toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#page-top"&gt;
  
              &lt;img id="logo" src="img/portfolio/logo1.png" class="img-responsive" alt=""&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li class="hidden"&gt;
                      &lt;a href="#page-top"&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-scroll"&gt;
                      &lt;a href="#portfolio"&gt;OUR WINES&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-scroll"&gt;
                      &lt;a href="#about"&gt;ABOUT US&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-scroll"&gt;
                      &lt;a href="#whereto"&gt;WHERE TO BUY&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
           &lt;!--/.navbar-collapse --&gt;
      &lt;/div&gt;
      &lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>@media(min-width:768px) {
  .navbar-fixed-top {
      padding: 25px 0;
      -webkit-transition: padding .3s;
      -moz-transition: padding .3s;
      transition: padding .3s;
  }
  .navbar-fixed-top .navbar-brand {
      font-size: 2em;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      transition: all .3s;
  }
  .navbar-fixed-top.navbar-shrink {
      padding: 10px 0;
  }
  .navbar-fixed-top.navbar-shrink .navbar-brand {
      font-size: 1.5em;
  }
  #logo {
      height: 400%;
      margin-top: -35px;
  }
  .navbar {
      text-transform: uppercase;
      font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-weight: 700;
  }
  .navbar a:focus {
      outline: 0;
  }
  .navbar .navbar-nav {
      letter-spacing: 1px;
  }
  .navbar .navbar-nav li a:focus {
      outline: 0;
  }
  .navbar-default,
  .navbar-inverse {
      border: 0;
  }
  }
  </code></pre>