I have been working on a responsive web design, after adding CSS to make a link stay centered on a an image the webpage now displays any new html behind the image. I want to be able to add more things on my webpage but any new html I write disappears.
Link to JSFIDDLEhttps://jsfiddle.net/R4bbit2k17/7yuL4y1p/1/#&togetherjs=MEzytpw3kf`
Because your .banner-inner is using position: absolute in conjunction with taking up 100% of the width and height, you'll need to set a position other than static for your text element(s), along with giving them a z-index greater than the default of 0:
p {
background: red; /* Purely to highlight the text */
position: relative;
z-index: 1;
}
This causes your text to appear on top of your image, and can be seen in the following:
body {
font-family: helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
header {
background: black;
color: white;
padding-top: 20px;
min-height: 45px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
float: right;
margin-top: 5px;
}
#media only screen and (max-width:1000px) {
.centered {
font-size: 12pt!important;
}
}
#media only screen and (max-width:800px) {
.centered {
font-size: 11pt!important;
}
}
#media only screen and (max-width:600px) {
.centered {
font-size: 10pt!important;
}
}
#media only screen and (max-width:400px) {
.centered {
font-size: 9pt!important;
}
}
#media only screen and (max-width:200px) {
.centered {
font-size: 8pt!important;
}
}
.banner-inner {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
color: white;
}
.centered {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
margin-top: 20%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 12pt;
}
.img {
width: 100%;
height: auto;
float: left;
}
p {
background: red;
position: relative;
z-index: 1;
}
<body>
<header>
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>Courses</li>
<li>About</li>
</ul>
</nav>
</div>
</header>
<section class="section-1">
<div class="banner-inner">
<img class="img" alt="" src="https://d2mt0dng9y3p4j.cloudfront.net/newandimproved/wp-content/uploads/2016/12/shop-with-a-sheriff-mockup.jpg">
<div class="centered">Start Learning</div>
</div>
</section>
<p>ANY HTML ADDED APPEARS BEHIND THE IMAGE AND I CANNOT FIGURE OUT HOW TO CHANGE IT TO APPEAR BENEATH THE IMAGE AS IT WOULD WITH A FRESH HTML PAGE</p>
</body>
Hope this helps!
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want it to have a header at the top which spans the width of the page, a main content part which has side bars either side and then a footer underneath. Unfortunately I am not very good when it comes to fixed, relative absolute and the measurements etc. so it is really appreciative.
I did use some of the code from here: How to make a page with header and left-sidebar?
But I edited it so the measurements were done in em not px as it makes it more scalable on devices.
Here is my current HTML layout
#import url('https://fonts.googleapis.com/css?family=Roboto');<!-- Custom Font -->
#charset "utf-8" #font-face {
font-family: 'Roboto', sans-serif;
}
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*main colour settings for page*/
body {
color: black;
font-family: 'Roboto';
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
/*Links*/
a,
a:link,
a:visited {
color: black;
text-decoration: none;
transition: 1s;
}
/*Link hovering*/
nav a:hover {
text-decoration: none;
border: solid 1px black;
border-radius: 5px;
padding: 10px;
}
/*Main heading*/
h1 {
font-size: 3em;
max-width: 100%;
max-height: 100%;
text-align: center;
position: absolute;
left: 2em;
right: 0;
top: 0;
height: 2em;
}
/*Secondary heading*/
h2 {
font-size: 2em;
max-width: 100%;
max-height: 100%;
}
/*Text*/
p {
font-size: 0.75em;
}
/*Images*/
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
text-align: center;
display: block;
}
#logo {
float: left;
margin-left: 10px;
margin-top: 5px;
max-height: 100px;
max-width: 100px;
}
canvas {
border: solid 1px black;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
text-align: center;
}
button {
margin-bottom: 1em;
}
/*Main Body*/
#mainContent {
position: absolute;
left: 10em;
top: 8em;
right: 0;
bottom: 1em;
text-align: center;
}
#sideBar {
position: absolute;
left: 0;
top: 8em;
right: 0;
bottom: 0;
width: 10em;
text-align: center;
padding: 2em;
border-right: solid 1px black;
max-height: 2000px;
}
#sideBar img {
max-width: 100px;
max-height: 100px;
margin-bottom: 2em;
}
/*Light Switches*/
#lightSwitchOff {
display: inline;
margin-top: 10px;
}
#lightSwitchOn {
display: inline;
margin-top: 10px;
}
/*Layout for desktop with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
p,
li {
font-size: 1.5em;
}
h1 {
font-size: 2.75em;
}
h2 {
font-size: 2.25em;
}
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
li {
font-size: 1.5em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.25em;
}
#enter {
max-width: 50%;
max-height: 50%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
p {
font-size: 1.25em;
}
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 200px e.g. iMac*/
#media only screen and (min-width: 2000px) {
p {
font-size: 2em;
}
}
<header>
<h1>Sliding Game</h1>
</header>
<!--Closes Header -->
<div id="leftSideBar">
<!-- Left Side Bar -->
<h2>Select Image:</h2>
<img src="images/dog.jpg" alt="Image Unvailable"></img>
<img src="images/italy.jpg" alt="Image Unvailable"></img>
<h2>Select Difficulty:</h2>
<p id="easy">Easy</p>
<p id="medium">Medium</p>
<p id="hard">Hard</p>
<button>Reset</button><br>
<button>Randomise</button>
<p>Timer:</p>
<div id="timer">0</div><br>
</div>
<!-- Closes Left Side Bar -->
<div id="mainContent">
<!-- Main Body -->
<canvas id="game" width="600px" height="600px">Cavas is not available on your browser</canvas><br>
<button id="start">Start</button>
<div style="display: none">
<img id="source" src="images/italy.jpg" alt="Image Unvailable">
</div>
</div>
<!-- Closes Main Content-->
<div id="rightSideBar">
<!-- Right Side Bar -->
<h2>Leaderboard</h2>
</div>
<!-- Closes Right Side Bar -->
<footer>
Website Created by Ryan Simms <br> 16024828#stu.mmu.ac.uk <br>
</footer>
<!-- Closes Footer -->
As for centering of elements on the webpage I would like you to recommend reading the following guide: Centering in CSS: Complete guide, and you can also use Flexbox for somewhat same result: Complete guide to Flexbox.
As for the header, I've made some code for you. You should checkout Bootstrap for easy positioning of elements on the webpage. They have specific classes for Navbars fixed bottom and top. Pretty easy framework!
.header {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
position: relative;
background: #353535;
width: 100%;
height: 50px;
margin: auto;
}
.text {
display: flex;
margin: auto;
color: orange;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
height: 300px;
}
.div1 {
display: flex;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
.div2 {
display: flex;
position: relative;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
.div3 {
display: flex;
position: relative;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
<div class="header">
<h3 class="text">Your text here</h3>
</div>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div class="container">
I tried to use a couple of posts that were here for resizing for mobile devices but i can't seem to get it working. The margins keep pushing all the elements together when you view the site on a mobile device
/* TEXT FORMATTING */
.introPar1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 400px;
margin-right: 400px;
font-size: 30px;
}
.introPar1 h1 {
text-align: center;
}
.contacts {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 400px;
margin-right: 400px;
font-size: 30px;
}
/* MOBILE FORMATTING */
#media (max-width: 1100px) {
introPar1 {
margin-right: 20px;
`enter code here`margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
You are seeing this page on mobile devices like this
You need to change like this
then increase the nav bar width
(I tried width: 1520px; for Nav beacuse that is the background image size you were used)
There are a bunch of problems with your code. But the problem with the menu is because li is not taking the height of a. So the list items will stack one under another, and will li under li. Li being smaller than a.
Use display:block on a.
Also, I copied the code from your site, so it will be here if someone else comes looking for this answer. Tried to clean it up a bit but you have some styles that i don't understand, like .introPar1 { margin-left:400px;margin-right:400px}
Anyway, see code below
body img {
max-width: 100%;
height: auto;
}
/* TOP NAVIGATION */
nav ul li a {
text-decoration: none;
margin: 20px;
padding: 20px;
border-style: solid;
border-color: grey;
display: block;
}
nav ul li {
float: left;
}
nav ul {
list-style-type: none;
float: left;
}
nav {
background-color: #f2f2f2;
padding: 10px;
float: left;
width: 100%;
box-sizing: border-box;
}
/* NAV HOVER */
nav a:hover {
background-color: blue;
border-color: orange;
border-style: solid;
color: white;
transition: .3s;
}
/* BANNER */
.banner {
text-align: center;
}
.banner img {
border-style: solid;
border-width: 10px;
border-color: #87CEEB;
}
/* BODY ELEMENTS */
.home {
font-weight: bold;
font-size: 20px;
}
.temp {
text-align: center;
margin: auto;
padding: 20px;
}
/* BACKGROUND */
.bgimage img {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
position: fixed;
}
/* TEXT FORMATTING */
.introPar1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 30px;
}
.introPar1 h1 {
text-align: center;
}
.contacts {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 30px;
}
/* MOBILE FORMATTING */
#media (max-width: 1100px) {
introPar1 {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
nav ul li a {
margin: 5px;
padding: 10px;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
nav ul li {
width: 100%;
}
}
<div class="bgimage">
<img src="http://via.placeholder.com/1200x1000">
</div>
<nav>
<ul>
<li class="home">Crafts LLC</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="banner"><img src="http://via.placeholder.com/350x150"></div>
<div class="Intro">
<article class="introPar1">
<h1><b><u>CRAFTS LLC</u></b></h1>
<br> Here at CRAFTS LLC, we offer you our 45 years of expertise of
<br> home repair advisory and remodeling services
<br>
<br> We are also here to help you with your estimation service needs
<br> and contractor referral services
<br>
<br> With CRAFTS LLC, you get both service and quality excellence.
<br> You need to look no further for your home repair and remodeling needs/solutions
<br>
</article>
</div>
<div class="contacts">
<p>Email to: craftsllc1#gmail.com or Call:813 347 7458</p>
</div>
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
I have 3 main sections to the site I'm practising on: Nav, Header and Section.
My header bar contains an image with some text in the middle, I spent a long time trying to find how to allow the image to accept the text on top of it and then have it go straight in to the centre(both vertically and horizontally) of the img.
I found something that worked, but after finding that solution, my Section decided to also go on top of the image, which I'm certain it is because of the position: absolute; on the image.
The help I need; how do I get the section to go under the header, with keeping the piece of text on top of the image and in the centre of it?
* {
box-sizing: border-box
}
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: "Open Sans", arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
height: auto;
text-align: center;
display: table;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
margin: 0;
padding: 0;
vertical-align: middle;
display: table-cell;
}
#bannerImage {
height: 500px;
width: 100%;
position: absolute;
z-index: -1;
}
section {
background-color: white;
font-family: arial;
width: 100%;
border: 1px solid #e7e7e7;
text-align: center;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Codewarts</h1>
</header>
<section>
<h2>Welcome!</h2>
<div id="content">
<p>Do you have a name?.....Great!</p>
<p>Insert it in the box below!</p>
</div>
</section>
Do You want somenthing like this?
header {
position: relative;
}
header h1 {
top: 50%;
left: 50%;
transform: translate(-50%,-50% )}
I'm struggling with this project I'm doing for practice. I'm having trouble with the innovation cloud project. Please explain me how to fix this.
I can't manage to get the "Learn More" button to be below the paragraph in the header section.
I can't manage to get the image in the main section to float left of the Header and paragraph.
I also can't manage the jumbotron DIV to appear below main. The image fuses with main, it doesn't appear below it where it should be.
Here is the pen for a visual: http://codepen.io/alejoj/pen/xGBbwv
Thanks for your help.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}
/* Header */
.header {
height: 800px;
text-align: center;
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg');
background-size: cover;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
color: white;
}
#media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
color: white;
}
.btn{
width: 30%;
height: 40px;
border: none;
margin: 25px auto 0 auto;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-color: black;
color: white;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav{
background-color: black;
}
.nav ul {
display: table;
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.nav li{
display: cell;
vertical-align: middle;
float: left;
padding-left: 10px;
color: white;
font-family: 'Roboto', sans-serif;
}
/* Main */
.main .container {
margin: 80px auto;
}
.main h2, p{
display: inline-block;
float: left;
}
.main img{
height: 150px;
width: 35%%;
margin: 50px -5px 50px 0px;
display: inline-block;
float: left;
}
/* Jumbotron */
.jumbotron {
margin: 10px 0;
height: 600px;
text-align: right;
background-image:url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg');
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
}
/* Media Queries */
#media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.clearfix{
clear: both;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1> INNOVATION CLOUD </h1>
<p>CONNECT YOUR IDEAS GLOBALLY</p>
<input class="btn" type="button" value="Learn More">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>Register</li>
<li>Schedule</li>
<li>Sponsors</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<img id="mainImage" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
<div class="clreafix"></div>
<div class="jumbotron">
<div class="container">
</div>
</div>
</body>
</html>
Not entirely sure about your desired outcome, but it seems that this css was throwing off a lot of what you want to fix:
.main h2, p {
display: inline-block;
float: left;
}
If you remove that and change the right margin on your image from -5 to 50 it looks pretty good like this: http://codepen.io/anon/pen/BNbyEP
Floating elements can really throw off your layout if you don't "clear" the floats. Sometimes I add a br style="clear:both" after floated elements to keep the flow looking as expected (in the case of not seeing your jumbotron image where it should be)
You have your p set to inline-block. Remove this:
.main h2, p {
display: inline-block;
float: left;
}
You have negative right margin on your image. Change this:
margin: 50px -5px 50px 0px;
to:
margin: 50px 50px 50px 0px;
Not sure what you mean.