* {
  margin: 0;
  padding: 0;
}


.home {
        width: 8%;
    }


    .header- {
    display: flex;
  //  justify-content: center;
    align-items: center;

    }

    .logo- {
      padding-top: 15px;
      background-color: white;
      padding-left: 20px;
      margin: 10px;
      text-decoration: none;
    }

    .tittle- {
      background-color: white;
      text-align: center;
    }

    .search-bar {
      margin-top: 5px;
      margin-left: 5px;
    }


    .space {
      margin: 20px;
    }

    .tittles{
      text-align: center;
    }

    .body- {

      display: flex;
      align-items: stretch;
    //  width: auto;

  //    flex-wrap: wrap;

      //this works how I want it but box too big??

        }

        .main-bod-{
          background-color: #f3f3f3;
          border: 2px solid black;
          border-radius: 12px;
          margin: 10px

        /*  height: 500px;
          min-height: 500px
*/

        }


            .side-bar- {
              background-color: #f3f3f3;
              border: 2px solid black;
              border-radius: 12px;
              padding: 5px;

              margin-left: 10px;
              margin-right: 0px;
              margin-top: 10px;
              margin-bottom: 10px;
            }





    .message- {

     padding-top: 50px;
     padding-left: 40px;
     padding-right: 40px;
     padding-bottom: 30px;

    }

    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }


    .caution {
      color: red;
      text-align: center;
      padding: 20px;
    }

    .example {
      background-color: #f3f3f3;
      border: 2px solid black;
      border-radius: 12px;
      margin: 20px}

      .lilexample {
        background-color: white;
        border: 2px solid black;
        border-radius: 12px;
        margin: 60px;


      }




            .other-example {
              background-color: #f3f3f3;
              border: 2px #f3f3f3;
              border-radius: 12px;
              margin: 60px;


            }

            .red-text {
              color: red;
              display: inline;
            }

            .blue-text {
              color: blue;
              display: inline;
            }

            .green-text {
              color: green;
              display: inline;
            }


                  .re-size{
                    /*
                    if picture doesn't automatically fit use this class
                    */

                    width: 100%;

                  }