CSS; images and text, float - css

Question

Very new to CSS, so apologies if this is simple beyond belief.
I am currently working on a page for class. There is a section where icons (coffee, music notes, food and a waiter) need to be floated above their respective headings. I have tried floating and clearing various elements. I hope I am just overlooking something simple!
I cannot edit the HTML in any way or I will receive a zero on the assignment, and I am only allowed to use CSS.
I am having trouble posting the code, so I hope it is okay to share the links.
HTML
https://github.com/melonysmith/dws1/blob/gh-pages/DWS1-Practical/index.html
CSS
https://github.com/melonysmith/dws1/blob/gh-pages/DWS1-Practical/css/styles.css
Any and all help and suggestions are welcome and very much appreciated!
EDIT: HTML and CSS posted.
I did get the icons to center above their headings, but I cannot seem to figure out how to get the "promo" section to center to the rest of the page, including the icons, headers and paragraphs.
<!-- begin promo -->
<section id="promo">
<div id="promo-first-col" class="promo-col">
<h3 id="coffee">Imported Coffee</h3>
<p>Checkout our various tyes of imported coffee.</p>
</div>
<div class="promo-col">
<h3 id="music">Great Music</h3>
<p>Our DJs will entertain you like never before.</p>
</div>
<div class="promo-col">
<h3 id="food">Finest Cuisine</h3>
<p>From Italian to Tex-Mex, you will find all types of food</p>
</div>
<div class="promo-col">
<h3 id="service">Nice Staff</h3>
<p>You will never forget our smile and professional attitude. </p>
</div>
</section>
<!-- end promo -->
#promo {
display: inline-block;
width: 100%;
background-color: #fff;
display: inline-block;
padding-bottom: 50px;
margin: 0 auto;
}
#promo p {
background-color: #fff;
width: 255px;
text-align: center;
margin: 0 auto;
}
#promo h3 {
background-color: #fff;
width: 255px;
text-align: center;
padding-top: 80px;
margin: 0 0 50px 0;
}
.promo-first-col {
display: inline-block;
background-color: #fff;
text-align: center;
width: 255px;
margin: 0 auto;
padding-top: 20px;
}
.promo-col {
display: inline-block;
background-color: #fff;
text-align: center;
width: 255px;
margin:0 auto;
padding-top: 20px;
}
#coffee {
float: left;
width: 255px;
background: #fff;
background-image: url("../images/ico_coffee.png");
background-position: center top;
line-height: 25px;
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;
}
#music {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("../images/ico_music.png");
background-position: center top;
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;
}
#food {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("../images/ico_food.png");
background-position: center top;
background-repeat: no-repeat;
text-align: center;
padding-right: 30px;
float: left;
}
#service {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("../images/ico_service.png");
background-position: center top;
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;
clear: both;
}
.clear {
clear: both;
}
EDIT 2: Going to try and attempt to post a snippet. I'm new here, forgive my awkwardness!
All of the images, headers and paragraphs should be next to each other in a line with the image above the heading and the heading above the paragraph. That part I have figured out. Might need more code to explain, but this entire "promo" div is sitting to the left of the rest of the page, which is centered.
#promo {
display: inline-block;
width: 100%;
background-color: #fff;
display: inline-block;
padding-bottom: 50px;
margin: 0 auto;
}
#promo p {
background-color: #fff;
width: 255px;
text-align: center;
margin: 0 auto;
}
#promo h3 {
background-color: #fff;
width: 255px;
text-align: center;
padding-top: 80px;
margin: 0 0 50px 0;
}
.promo-first-col {
display: inline-block;
background-color: #fff;
text-align: center;
width: 255px;
margin: 0 auto;
padding-top: 20px;
}
.promo-col {
display: inline-block;
background-color: #fff;
text-align: center;
width: 255px;
margin:0 auto;
padding-top: 20px;
}
#coffee {
float: left;
width: 255px;
background: #fff;
background-image: url("http://melonysmith.github.io/dws/DWS1-Practical/images/ico_coffee.png");
background-position: center top;
line-height: 25px;
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;
}
#music {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("http://melonysmith.github.io/dws/DWS1-Practical/images/ico_music.png");
background-position: center top;
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;
}
#food {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("http://melonysmith.github.io/dws/DWS1-Practical/images/ico_food.png");
background-position: center top;
background-repeat: no-repeat;
text-align: center;
padding-right: 30px;
float: left;
}
#service {
float: left;
width: 255px;
background: #fff;
line-height: 25px;
background-image: url("http://melonysmith.github.io/dws/DWS1-Practical/images/ico_service.png");
background-position: center top;
background-repeat: no-repeat;
text-align: center;
padding-top: 10px;
padding-right: 30px;
float: left;
clear: both;
}
.clear {
clear: both;
}
<!-- begin promo -->
<section id="promo">
<div id="promo-first-col" class="promo-col">
<h3 id="coffee">Imported Coffee</h3>
<p>Checkout our various tyes of imported coffee.</p>
</div>
<div class="promo-col">
<h3 id="music">Great Music</h3>
<p>Our DJs will entertain you like never before.</p>
</div>
<div class="promo-col">
<h3 id="food">Finest Cuisine</h3>
<p>From Italian to Tex-Mex, you will find all types of food</p>
</div>
<div class="promo-col">
<h3 id="service">Nice Staff</h3>
<p>You will never forget our smile and professional attitude.</p>
</div>
</section>
<!-- end promo -->

Answer 1

Create two container divs: one containing the coffee div and the cuisine div, and the other containing the other two divs. Set the container on the left to
float: left;
and the other to
float: right;
There are now several ways you can go about this. One way would be to set both containers a
width: 50%
and for the contained two divs in each column/container
text-align: center;
OR
You could simply give them the float properties and then set margin-left on the left one and margin-right on the right one, and play around with the margins a bit until you get them where you want them.
Hope that helps!