Comment redimensionner et déplacer mon image Development Front End

J'essaie de déplacer mon image vers la gauche et de le rendre plus petit afin de prendre une certaine quantité d'espace sur le côté gauche. Une idée de ce que je fais mal? Voudrais-je utiliser un flotteur ou un col. J'ai essayé d'aller sur un site pour changer les dimensions directement mais toujours rien. Des idées? Si vous pouvez fournir un code qui serait génial.

. p>

html fort> p> xxx PRE>

CSS FORT> P>

 /* Main Column Typography */

.main-area h2 {
    font-size: 165%;
    font-weight: normal;
  }
  
  .section {
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .container {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media screen and (min-width: 1280px) {
    body {
      font-size: 16px;
    }
  
    .container {
      max-width: 1200px;
    }
  }
  
  @media screen and (max-width: 767px) {
    .section {
      padding-left: 20px;
      padding-right: 20px;
    }
  }
  
  header {
    padding-top: 20px;
    color: #fffff;
    background-color: #405c71;
  }
  
  header h1 {
    margin: 0;
    font-weight: normal;
    font-size: 165%;
  }
  
  header p {
    font-size: 90%;
    margin: 0;
  }
  
  /* Site Navigation */
  .site-nav {
    margin-top: 20px;
  }
  
  .site-nav ul {
    margin: 0;
    padding: 0;
  }
  
  .site-nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
  }
  
  .site-nav a {
    display: block;
    color: #fff;
    padding: 10px 20px;
    background-color: #365267;
  }
  
  .site-nav a:hover {
    background-color: #2c465a;
  }
  
  @media screen and (max-width: 1023px) {
    .site-nav li {
      width: 33.332%;
      margin-right: 0;
    }
  
    .site-nav a {
      padding: 15px 0;
      margin-right: 5px;
      margin-bottom: 5px;
      text-align: center;
    }
  }
  
  @media screen and (max-width: 767px) {
    .site-nav li {
      width: 50%;
    }
  }
  
  /* End Site Navigation */
  
  .content-area {
    background-color: #fff;
    padding-bottom: 40px;
    padding-top: 40px;
  }
  
  @media screen and (max-width: 767px) {
    .content-area {
      padding-top: 20px;
    }
  }
  
  .main-area {
    width: 66%;
    float: left;
    padding-right: 40px;
    box-sizing: border-box;
  }
  
  .sidebar {
    color: #999;
    font-size: 85%;
  }
  
  .sidebar h3 {
    font-size: 138.5%;
    margin-bottom: 7px;
  }
  
  .info-box {
    background-color: #efeedb;
    border: 5px solid #e6e5c2;
    padding: 20px 40px 7px 40px;
    margin-bottom: 1em;
  }
  
  @media screen and (max-width: 767px) {
    .hide-small {
      display: none;
    }
  }
  
  .box-a {
    background-color: #e7eff5;
    padding: 20px 20px 0 20px;
    border: 2px solid #d3dee7;
    margin-bottom: 30px;
  }
  
  @media screen and (max-width: 767px) {
    .box-a {
      margin-bottom: 15px;
    }
  }
  
  /* Grid */
  .row {
    margin-right: -20px;
  }
  
  .col {
    width: 100%;
    float: left;
    padding-right: 20px;
    box-sizing: border-box;
  }
  
  .col-xs-11 {
    width: 91.662%;
  }
  .col-xs-10 {
    width: 83.332%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-8 {
    width: 66.662%;
  }
  .col-xs-7 {
    width: 58.331%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-5 {
    width: 41.662%;
  }
  .col-xs-4 {
    width: 33.332%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-2 {
    width: 16.662%;
  }
  .col-xs-1 {
    width: 8.332%;
  }
  
  @media screen and (min-width: 768px) {
    .row {
      margin-right: -40px;
    }
  
    .col {
      padding-right: 40px;
    }
  
    .col-sm-11 {
      width: 91.662%;
    }
    .col-sm-10 {
      width: 83.332%;
    }
    .col-sm-9 {
      width: 75%;
    }
    .col-sm-8 {
      width: 66.662%;
    }
    .col-sm-7 {
      width: 58.331%;
    }
    .col-sm-6 {
      width: 50%;
    }
    .col-sm-5 {
      width: 41.662%;
    }
    .col-sm-4 {
      width: 33.332%;
    }
    .col-sm-3 {
      width: 25%;
    }
    .col-sm-2 {
      width: 16.662%;
    }
    .col-sm-1 {
      width: 8.332%;
    }
  }
  
  @media screen and (min-width: 1024px) {
    .col-md-11 {
      width: 91.662%;
    }
    .col-md-10 {
      width: 83.332%;
    }
    .col-md-9 {
      width: 75%;
    }
    .col-md-8 {
      width: 66.662%;
    }
    .col-md-7 {
      width: 58.331%;
    }
    .col-md-6 {
      width: 50%;
    }
    .col-md-5 {
      width: 41.662%;
    }
    .col-md-4 {
      width: 33.332%;
    }
    .col-md-3 {
      width: 25%;
    }
    .col-md-2 {
      width: 16.662%;
    }
    .col-md-1 {
      width: 8.332%;
    }
  }
  
  @media screen and (min-width: 1280px) {
    .col-lg-11 {
      width: 91.662%;
    }
    .col-lg-10 {
      width: 83.332%;
    }
    .col-lg-9 {
      width: 75%;
    }
    .col-lg-8 {
      width: 66.662%;
    }
    .col-lg-7 {
      width: 58.331%;
    }
    .col-lg-6 {
      width: 50%;
    }
    .col-lg-5 {
      width: 41.662%;
    }
    .col-lg-4 {
      width: 33.332%;
    }
    .col-lg-3 {
      width: 25%;
    }
    .col-lg-2 {
      width: 16.662%;
    }
    .col-lg-1 {
      width: 8.332%;
    }
  }
  
  @media screen and (max-width: 1023px) {
    .push-down-sm {
      margin-bottom: 30px;
    }
  }
  
  @media screen and (max-width: 767px) {
    .push-down-sm {
      margin-bottom: 15px;
    }
  }
  
  footer {
    text-align: center;
    font-size: 85%;
    color: #fff;
    padding-bottom: 20px;
    padding-top: 20px;
  }
  
  .row:before,
  .row:after,
  .group:before,
  .group:after {
    content: "";
    display: table;
  }
  
  .row:after,
  .group:after {
    clear: both;
  }
  
  .row,
  .group {
    zoom: 1;
  }