my background image adjustment.

Question

I couldn't figure out how to adjust background image to fit and actual size on .header and all containers inside header look wrong to me. i want main-nav to be on the bottom right corner and set in a row. Any suggestion?

thank you

HTML <!DOCTYPE html>

<title>Thai Massage</title>
<link href="https://fonts.googleapis.com/css?family=Marmelad|Oranienbaum|Special+Elite" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">

</head>

<header id="top" class="main-header">
  <div class="tel">Tel: (646) 330-1917</div>
  <span class="title"> Culture...Traditional....Spiritual</span>
  <h1>Nuad Thai Massage</h1>
<div class="container clearfix">
  <ul class="main-nav">
    <li> <a href="#about">ABOUT</a></li>
    <li> <a href="#massage">MASSAGE MENU</a></li>
    <li> <a href="#tips">BEAUTY TIPS</a></li>
    <li> <a href="#contact">CONTACT</a></li>
  </ul>
  </div>
</header>

 <div class="primary-content">
  <p>This unique healing system of Thai Yoga Massage, also called Nuad Boran, the practitioner guides the client through a series of yoga postures, while palming and thumbing along the body's energy (Sen) lines and pressure points. Together these actions result in a comprehensive full body treatment that relieves muscular tension, improves circulation, boosts the immune system and balances the body energetically. Thai Yoga Massage is performed on a mat on the floor, both client and practitioner are dressed in comfortable clothing allowing ease of movement and flexibility.</p>
</div><!--End .primary-content-->

<div class ="seconary-content t-border"> <h2 class="price">RELAX WITH MASSAGE</h2> <ul class="sub-price"> <li>Neck, Back and shoulder Massage</li> <p>Short on time? Relieve tension and stress in the neck,back and shoulders while releasing tigh areas through massage therapy. 30 mins 30$</p> <li>Full body Thai Massage</li> <p>Relaxing with full body massage, We combine our expertise in deep tissue massage, Thai yoga massage and aroma theraphy to create a massage to your specific needs. 1 Hour 60$</p> <li>Pressure Points Massage</li> <p>Massaging pressure points on the human body is both pleasurable and therapeutic. It can help relieve pain, improve circulation and channel the flow of energy. There are hundreds of pressure points all over the human body. Most are found in soft tissue near bundles of nerves and joints. All pressure points should be manipulated gradually and carefully. Too much pressure can result in pain and injury. 30 mins 40$</p>

</ul>

</div>

<div class="third-content t-border"> <h2>Herbs and Remedies</h2> <p>Human beings and plants have co-evolved for millions of years, so it makes perfect sense that our complex bodies would be adapted to absorb needed, beneficial compounds from complex plants and ignore the rest. This is an established fact in nutrition, but the West's sharp distinction between food and medicine somehow blinds us to these properties when it comes to botanicals. The most successful medical philosophies make no such division Okinawans, the world's longest lived people, believe that the food they eat is "nuchi gusui" which roughly translates as "medicine for life."</p> <a class= "callout" href="#more">Find out more</a> </div>

</div>

</body>

</html>

CSS

/* Base Styles -------------------- */

{ box-sizing: border-box; }

body { background-color: #D2B48C; color: #696969; margin:0; font: 1em/1.5 "Marmelad";

}

h1 { font-size: 5.625rem; /* 90px/16px*/ color: rgba(255, 255, 255, 1); text-transform:uppercase; font-weight:normal; text-align:center; margin: 20px; }

/------------- Layout Container-----------------/

.main-header {

padding-top: 50px; height: 450px; background: url("../img/buddha.jpg") no-repeat center;

background-origin: content-box; }

.title { color: white; font-size: 40px; /* 26px/16px*/ padding-top: 40%; padding-left: 25%;

}

/-------------Navigation-------------------/

.main-nav { list-style: none;

}

.primary-content, .third-content, .price, { text-align:center; }

.sub-price { text-align:center; list-style-type:none; }

.tel { text-align: center; margin-left: 65%; padding-top: 50px; padding-bottom: 60px; color: white; font-size: 25px;

}

.t-border { border-top: 2px solid #dfe2e6; }

/------------------------------------------ Media Queries ------------------------------------------/ @media (min-width: 768px) {

.container { float: right; }

}

Welcome to the Treehouse Community

Looking to learn something new?

Bee Priola

Bee Priola

my background image adjustment.