I'm facing two issues that I can't seem to resolve. My goal is to recreate a design similar to the one found at https://i.sstatic.net/XfPqm.jpg.
My first issue is with adjusting the box in the header to stay aligned next to my headline tags. The second issue is related to positioning all of my content elements in a single line, where one appears above and another 5 pixels below the other. I have attempted to visually present these issues using Paint at https://i.sstatic.net/USBIk.jpg. Here is my code, any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Newspaper</title>
</head>
<body>
<header>
<hgroup>
<h2>THE OLD POST</h2>
<h3>ILLUSTRATED WEEKLY NEWSPAPER</h3>
<div class="header-Box">
<strong>This is a story about one pig</strong>
</div>
</hgroup>
</header>
<div class="infoBorder">
<span>Est.1896</span>
<span>Wednesday,November 24,1892</span>
<span>Price 6d</span>
</div>
<div id="main-Content">
<h1>INSERT YOUR HEADLINE</h1>
<div class="parent-content">
<div class="content">
<strong>Bacon ipsum dolor amet beef strip steak beef ribs ham, porchetta ground round ham hock turducken prosciutto kevin swine.</strong>
<p>
Flank turkey venison frankfurter spare ribs drumstick ball tip rump porchetta kielbasa swine pork turducken. Turkey frankfurter leberkas flank pork belly porchetta pork landjaeger beef ribeye alcatra picanha hamburger tongue. Cow bacon ribeye sirloin pancetta sausage pork loin jerky short ribs corned beef biltong hamburger.
</p>
</div>
<div class="content">
<strong>Hamburger pastrami strip steak turkey landjaeger sirloin tail pig shoulder tri-tip. Tail swine flank meatball turkey andouille drumstick pancetta sausage tri-tip spare ribs ribeye.</strong>
<p>
Jowl turkey tri-tip salami. Porchetta fatback corned beef, andouille ham hock chuck cow short loin bresaola. Landjaeger sausage spare ribs kielbasa filet mignon capicola biltong. Sausage t-bone doner hamburger, tri-tip cupim andouille.
</p>
</div>
<div class="content">
<strong>Jerky cow meatloaf pastrami landjaeger bacon ground round shank venison jowl pork belly biltong capicola kevin pig. Filet mignon alcatra pancetta strip steak pork belly.</strong>
<p>
Alcatra pastrami shoulder doner brisket spare ribs turducken chuck kevin tenderloin flank. Pig hamburger tenderloin, pork cow pancetta ground round kielbasa bresaola shank fatback sirloin beef ribs tail beef. Chicken ham hock salami shoulder, andouille fatback filet mignon bresaola venison.
</p>
</div>
<img src="http://www.gif-favicon.com/images/flowers/pink-flowers-transparent-clipart-0400-10054.gif" />
</div>
</div>
</body>
</html>
Below is my CSS code for reference:
body {
background-image: url("img/news_background.jpg");
}
header {
border-bottom: 2px solid #000;
padding: 20px;
}
div.header-Box {
border: 2px solid #000;
display: inline-block;
}
h1,
h2,
h3 {
text-align: center;
}
h2 {
font-size: 40px;
margin: 0px;
}
h3 {
font-size: 15px;
margin: 0px;
}
div.infoBorder {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
}
span {
font-weight: bold;
margin: 160px;
}
div#main-Content {
border-top: 2px solid #000;
}
div.content {
display: inline-block;
width: 240px;
height: 280px;
border: 1px solid #000;
padding: 10px;
}