I am a complete newbie, so bare with me. I have tried everthing in order to get the borders at the bottom the width or the picture and text above it, but nothing seems to work. let me know if there is something else you need to answer this.
file:///C:/Users/Rodney/Documents/Rogue%20Pickings/index.html
Welcome to the forums, @rdtelemaque.
Unfortunately, as a new member you can’t post attachments. You can show us your code instead by posting it here.
You can highlight your code, then use the </> button in the editor window, which will format it for you, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
I am afraid the link is to your hard drive and so can not be seen anyway.
Then you haven’t tried everything, have you. 
Are you writing a simple page as part of a learning project or are you using a framework to create a more complicated page?
If a simple page, then copy your HTML and CSS to your clipboard and paste it into your next post using the backticks that @TechnoBear described. Instead of the actual images, which you are not yet entitled to post, be sure to fill in the width=“” and height=“” attributes in the element so we will know the native size of the images (the CSS may change those sizes).
If you are using a framework such as bootstrap, and do not have a good fundamental knowledge of HTML and CSS, then you were out of your league before you started. Best of luck.
Before someone resolves your problem,
I would like to point out that you have just
invited members to disrobe with you. 
This may well be a pleasant experience
in warmer climes. 
But in less temperate parts…
Further reading:-
coothead
Are you asking how to get a border around both your image and caption?
If so, you could just set a border on the <figure> element, then nest the <img> and <figcaption> inside of the <figure>
Something like this -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Border around img and caption</title>
<style>
figure {
display:inline-block;
text-align:center;
border:1px solid;
}
figure img {
/* styles for testing without an image*/
display:block;
width:200px;
height:200px;
background:lime;
}
figcaption {
background:#eee;
padding:10px;
}
</style>
</head>
<body>
<figure>
<figcaption>Image Caption</figcaption>
<img src="#" alt="img alt text">
</figure>
</body>
</html>
HTML code
<!Doctype Html>
<html>
<head>
<meta charset="utf-8">
<title>Rogue Pickings</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header>
<div class="full-width">
<div class="half-width">
<h1><span>Rogue</span> Pickings</h1>
</div>
<div class="half-width">
<nav>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#menu">MENU</a></li>
<li><a href="#location">LOCATION</a></li>
<li><a href="#gallery">GALLERY</a></li>
<li><a href="#reviews">REVIEWS</a></li>
<li><a href="#content">CONTENT</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<section id="about">
<div class="main-image"><img src="images/hero-image.png" alt="hero-image"/></div>
<div class="full-width">
<h3>welcome to our little corner of the internet!</h3>
<p>Welcome to the Rouge Pickings, the roaming truck bringing you the freshest ingredients and ideas in food.
Our team works hard so you can be sure our ingredients are always fresh and picked carefully.
Our menu changes everyday and is made with you in mind. We cant wait to come to you! Check out our
locations to see where you can find us.</P>
</div>
</section>
<section id="menu">
<h4>TODAY'S SPECIALS</h4>
<ul>
<li>Flaming Hummus & Falafel Salad</li>
<li>Sizzling Bean Burrito</li>
<li>Green Cloves Tamales</li>
</ul>
</section>
<section id= "reviews">
<h4>OUR AWESOME REVIEWS</h4>
<p>"I got so excited about the yumminess of the falafel salad that i am typing this review as i inhale my lunch
Yes it is that good.... Service was super friendly and quick. Can't wait to see your rogue pickings for
tomorrow"</p>
</section>
<section id="location">
<h4>CONTACT US</h4>
<p>1001 Portero Avenue<br>
San Francsico, <abbr title="California">CA 94110</abbr><br>
(415) 206-8000
</P>
</section>
<div class="footer">
<footer>
<p>Powerd by lots of <span><em>Fresh</em></span> Ingredients</p>
</footer>
</div>
</main>
</body>
</html>
CSS CODE
/***** Grid *****/
.full-width{
width: 1200px;
margin: 0 auto;
}
.half-width{
width: 600px;
float: right;
}
.half-width{
width: 600px;
float: left;
}
/***** Body *****/
body {
font-family: 'Montserrat', sans-serif;
background-color: #ffffff
}
/***** header *****/
header {
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: bold;
color: black;
text-transform: uppercase;
}
h1 span {
color: #77a466;
}
nav {
float: right;
padding: 10px; 40px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #77a466;
}
.main-image img {
text-align: center;
border-top: 3px solid #77a466;
border-bottom: 3px solid #77a466;
display: block;
margin-left: auto;
margin-right: auto;
}
h3 {
color: #77a466;
font-weight: bold;
text-transform: uppercase;
}
p {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: bold;
color: black;
}
/***** bottom *****/
h4 {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: bold;
}
#location h4 {
float: right;
width: 27%;
}
#about {
border-bottom: solid gray 1px;
padding-left: 20px;
padding-right: 20px;
display: block;
}
#menu {
width: 450px;
float: left;
border-right: solid gray 1px;
height: 200px;
}
#reviews {
width: 400px;
float: left;
padding-left: 30px;
padding-right: 28px;
border-right: solid gray 1px;
height: 200px;
}
#menu h4 {
padding-left: 70px;
height: 20px;
}
#menu ul li {
font-size: 16px;
color: #77a466;
line-height: 40px;
padding-left: 33px;
list-style-type: none;
}
#reviews p {
font-size: 16px;
}
#location p {
font-size: 16px;
line-height: 24px;
float:right;
width: 27%;
}
.footer p {
font-size: 16px;
font-weight: bold;
text-align: center;
border-top: solid grey 1px;
height: 50px;
width: 100%;
clear: both;
padding: 10px;
}
.footer span{
color: #77a466;
}
It is good practice to include the native dimensions of images in the <img> element by including the width="" and height="" attributes. The primary reason for including the width="" and height="" attributes in the <img> tags is that they help the page load smoother by telling the HTML to reserve that space for the image.
The advantage to us is that - because your images are on your hard drive and we cannot access them - we can substitute a placeholder with matching dimensions by taking advantage of the dimensions in those attributes.
Please add those dimensions to your HTML as requested in post #4. (It’s not like there are a bunch of them 
)
It looks like your image was sliding up under your floats.
You need to contain yer floats
.full-width{
width: 1200px;
margin: 0 auto;
overflow:hidden;/*contain the .half-width floats*/
}
The HTML is impressively valid! Kudos for that!
What kind of grid are you trying to use, if any?
.half-width {
width: 600px;
float: right;
}
.half-width {
width: 600px;
float: left;
}
CSS stands for Cascading Style Sheet. Cascading means that if two selectors are identical, the rules in the last selector supplement or override those in the earler selector.
All (both) of the HTML elements with the CSS class “half-width” will “float:left” because it overrides the one with “float:right”
You may need to explain why there are so many floats in your code. Floats are not as common today as they once were and are probably causing the border problem that you are experiencing.
There’s much more to talk about that one would normally have learned in a basic HTML/CSS class, but I need to eat something now, so someone else may join this conversation before I return.
EDIT: Already joined by Ray.H. Thank you, sir.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.