So, I'm trying to reprogram a website for the children's dentist my mom works for and I can't seem to get bootstrap to do what I want for a number of different things. Right now, I'm trying to create a header file that I'm going to link the rest of my pages to. The following is from a graphic designer and is what I'm currently trying to program:
headersample.jpg

This is a screenshot of what I have so far:
headerprogrammed.jpg

I'm using bootstrap 3.3.7. Here's my code so far:

file: header.html
Code:
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>header</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=			"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
        <link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<nav class="navbar navbar-default">
        	<div class="container-fluid">
        		<div class="row no-pad">
            		<div class="hidden-xs col-sm-3">
                    	<div class="navbar-header">
                        	<img src="images/headerleft.jpg" class="img-responsive center-block" alt="Sun and Clouds">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-7">
                    	<div class="navbar-header">
        					<img src="images/mainheaderimage.jpg" class="img-responsive center-block" alt="Dr. Suzanne Clift Children's Dentistry">
                        </div>
                	</div>
                    <div class="hidden-xs col-sm-2">
                    	<div class="navbar-header">
                        	<img src="images/headerright.jpg" class="img-responsive center-block" alt="Clouds and Kite">
                        </div>
                    </div>
            	</div>
        	</div>
            <div class="container">
                <div class="row">
                	<div class="col-xs-4 col-sm-2 button">
                    	WELCOME
                    </div>
                    <div class="col-xs-4 col-sm-2 button">
                    	THE DENTIST
                    </div>
                    <div class="col-xs-4 col-sm-2 button">
                    	TREATMENTS
                    </div>
                    <div class="col-xs-4 col-sm-2 button">
                    	OFFICE TOUR
                    </div>
                    <div class="col-xs-4 col-sm-2 button">
                    	FAQ
                    </div>
                    <div class="col-xs-4 col-sm-2 button">
                    	CONTACT US
                    </div>
                </div>
            </div>
        </nav>
	</body>
</html>
file: styles.css
Code:
@charset "utf-8";
/* CSS Document */
.navbar-header {
	float: left;
    text-align: center;
    width: 100%;
	background-color: rgba(169,197,253,1);
}

.navbar-brand {
	float: none;
}

.navbar-default {
	background-color: rgba(169,197,253,1);
}
.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}
.button {
	background-color: rgba(0,119,192,1);
	border-radius: 5px;
	height: 20px;
}
So, my questions are as follows:
  1. How do I get the images at the top to work out right? On mobile devices I want the images to either side to disappear which I have working now. However, when I put them in on the larger screen sizes their size is more based on how many of the 12 columns they're spanning rather than based on the image size itself. Is there a way to make the sun/cloud a little smaller, have the central logo image aligned with the bottom of the sun image, and have the image on the right not push down the entire document? Like, the string of the kite is supposed to be going down past the buttons.

  1. Also, is there a way to make the cloud/kite image pushed to the left a specific amount rather than offsetting by a whole column? The end of the text is supposed to overlap the cloud and the right image is supposed to be a little larger and not off to the side as much.


  1. Is there a better way to do the buttons than I'm doing it? How do I get the column padding inbetween the buttons that is usually there? Padding between columns was a problem that I didn't want for the images and I had to create a class to get rid of it but it's not there when I do the next set of columns and leave out the no-pad class? wtf is wrong?

  1. Lastly, how can I get the little orange bar inbetween the buttons?


Thanks a bunch for your time! I really appreciate it as I'm getting frustrated with this as it seems like it should be easy.