Develop Reference

The fixed topbar is covering the Heading I'm jumping to

I know this code is REALLY messy, but it's my first project and I'm still learning how to align code correctly. I've tried margin with h2::before in CSS, it kinda worked but with it came other problems regarding the text's formation. I've seen that it is possible to achieve the desired result with the help of JavaScript but I'm a total noob at that.
Hope some of you can help me solve this problem, thanks in advance.
function openNav() {
document.getElementById("mySidenav").style.width = "260px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
background-image: url('https://i.imgur.com/oGNxInf.jpg');
background-size: cover;
margin-top: ;
}
h1 {
position: relative;
text-align: center;
color: orange;
padding: 30px 50px;
margin-left: 0px;
bottom: 15px;
}
figure {
text-align: center;
}
/*nav{
background-color: white;
background-size: ;
/*overflow: hidden; hat verhindert, dass Fenster aufpoppen
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
margin: 20px 20px;
padding:20px 20px;
} */
/*.topbar a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topbar a:hover {
background-color: gray;
}*/
.input {
float: left;
text-align: ;
padding: 5px 0px;
margin: 10px 0px 10px 800px;
}
button {
float: left;
text-align: center;
padding: 3px 3px;
margin: 10px 0px 10px 0px;
}
.acc {
float: left;
margin: 10px 0px 10px 60px;
}
ul ul {
float: left;
display: none;
background: black;
top: 100%;
padding: 0px 0px;
width: 100%;
}
ul li:hover>ul {
display: block;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
font-size: 6;
padding: 0px 0px;
text-align: center;
}
#topbar {
background: black;
background-size: ;
position: fixed;
top: 0;
left: 0;
padding: 0 0px;
margin: 0;
border-radius: 0;
display: inline-table;
width: 100%;
z-index: 2;
}
ul:after {
content: "";
clear: both;
display: block;
padding: 0px 0px;
}
ul li:hover {
background: gray;
padding: 0px 0px;
}
ul li:hover a {
color: white;
}
ul li a {
display: block;
padding: 15px 40px;
color: orange;
text-decoration: none;
font-size: 100%;
}
ul li ul {
display: none;
position: absolute;
padding: 0px 0px;
}
ul li ul li {
width: 100%;
padding: 0px 0px;
margin: 0px 0px;
text-align: center;
}
.li {
width: 150px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
right: 0;
background-color: black;
overflow-x: hidden;
padding-top: 30px;
transition: 0.5s;
padding-left: 5px;
}
.sidenav a {
padding: 8px 8px 30px 10px;
font-size: 20px;
color: orange;
display: block;
transition: 0.5s;
text-decoration: none;
}
.sidenav a:hover {
color: white;
}
.sidenav .close {
position: absolute;
top: 0;
right: 0px;
font-size: 30px;
padding-top: 0px;
}
.konto {
color: orange;
padding-left: 10px;
padding-bottom: 20px;
text-decoration: underline orange;
}
.Header {
position: relative;
width: 1050px;
height: 100px;
background-color: brown;
padding: 0;
margin-top: 160px;
left: 300px;
z-index: 1;
}
.Header a {
position: relative;
padding: 0px 50px;
text-decoration: none;
color: orange;
bottom: 50px;
left: 140px;
}
.Header a:hover {
color: white;
}
.textblock {
position: relative;
border: solid 3px;
width: 1045px;
height: 3500px;
margin-top: ;
left: 299px;
background: rgba(100, 100, 100, 0.5)
}
.text {
width: 800px;
padding-left: 20px;
}
h2 {
border-bottom: solid 1px black;
padding-top: 0px;
cursor: pointer;
padding-left: 20px;
margin: 0;
position: ;
top: -20px;
}
ol li {
padding: 10px;
margin-top: px;
}
.anchor {
position: relative;
top: ;
}
details>summary h2 {
color: black;
padding-top: ;
cursor: pointer;
}
details summary {
list-style: none;
}
summary:before {
content: "֍";
color: red;
cursor: pointer;
position: relative;
top: px;
}
details[open] summary:before {
content: "֎";
position: relative;
top: px;
cursor: pointer;
}
summary {
height: 100;
margin: 0;
padding: 0;
}
h2::before {
display: block;
content: "";
margin-top: ;
padding-top: ;
pointer-events: none;
}
p {
position: relative;
top: -20px;
}
<!doctype html>
<html>
<head>
<title>Aldia, seeker of truth</title>
</head>
<body>
<ul id="topbar">
<li class="li">Home</li>
<li class="li">Characters
<ul>
<li>Bosses</li>
<li>NPC's</li>
<li>Merchants</li>
</ul>
</li>
<li class="li">World
<ul>
<li>Areas</li>
<li>Shortcuts</li>
<li>Bonfires</li>
</ul>
</li>
<li class="li">Weapons
<ul>
<li>One-Handed</li>
<li>Two-Handed</li>
<li>Ranged Weapons</li>
</ul>
</li>
<input class="input" type="text" placeholder="Search">
<button type="submit"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/OOjs_UI_icon_search-ltr.svg/2000px-OOjs_UI_icon_search-ltr.svg.png" height="10px" width="10px"></button>
<a onclick="openNav()" class="acc" href="#create"><img src="http://getdrawings.com/free-icon/google-account-icon-65.png" height="25px" width="25px"></a>
</ul>
<div id="mySidenav" class="sidenav">
×
<h2 class="konto">Account-Options</h2>
Log In
Register
Delete
Manage
</div>
<div class="Header">
<h1>Aldia, scholar of the first sin</h1>
Description
Lore
Dialogue
Items
Gallery
</div>
<div class="textblock">
<figure>
<img src="https://i.imgur.com/VqTZcGU.png" height="640" width="588" />
<div>
<figcaption>Aldia has become one with the flame after his last experiment turned him into a charred, immortal being.</figcaption>
</div>
</figure>
<div class="text">
<details open>
<summary>
<h2 id="Description" class="anchor">Description</h2>
</summary>
<!--<button type="button" data-toggle="collapse" data-target: "#Des" height="3px" width="3px"></button>-->
<p id="Des" class="collapse">All we see of Aldia are his head and shoulders, his skin color turned gray like ash, maybe caused by the flames that surround his presence. It is speculated that the parts the player sees of Aldia are only part of a giant body that he inherited
after conducting his last experiment. The roots on his head resemble hair and a read eye orb is in one of his sockets. <br>His voice is a mixture of many different voices at one point the Emerald Herald Shanalotte can be heard talking out of
Aldia.</p>
</details>
<details open>
<summary>
<h2 id="Lore" class="anchor">Lore</h2>
</summary>
<p>Aldia is one of the most interesting characters in the dark souls universe. He's tried to uncover the secrets of life by conducting several experiments on others and on himself. He always thought he would find the answer to all his questions in
the curse of the undead, hence why he researched it's origins to a great extend.<br> Discovering the falsehood of Gwyns linking of the first flame, Aldia quickly proclaimed it as "the first sin". As a consequence of the first linking of the
fire, men assumed a fleeting form for every time the fire would fade. They would return to their natural state of being hollow, loosing a piece of themselves for every death they experience. The dark that churns within men marks them as human,
the dark sign limits the boundaries of their humanity, making them less of a human with every loss of life. Aldia sought to find a path that exists outside of the cycle of light and dark, shattering the yoke that binds all humans.<br> The ancient
dragon that is found at the top of dragon shrine is only an illusion created by Vendricks older brother with a giants soul and dragon bones. He probably was inspired by the immortal dragons of the age of ancients, as they exist outside of the
cycle Aldia seeks to break out of. In the age of ancients there was no fire, no dark nor life or death, just a never changing landscape shrouded by fog, consisting of only archtrees and everlasting dragons.<br>In an attempt to create a being
with these properties the Emerald Herald was fabricated but she did not come out as intended. Later on she may has served as means for Aldia to obtain a great amount of souls to become a true monarch, in the end he failed his goal even secluding
his soul from his body, which would explain why we don't get a soul after fighting him at the throne of want. He even narrates the ending indicating that he keeps on living even after his defeat against the bearer of the curse.</p>
</details>
<details open>
<summary>
<h2 id="Dialogue" class="anchor">Dialogue</h2>
</summary>
<p><strong>1st encounter</strong>
<br> "No one has come this far not for a very long while, Young hollow do you wish to shed this curse? Then accept the fate of your ilk and face the trials that await you Unless, you have joined the crestfallen *laughs*"</p>
<p><strong>2nd encounter</strong>
<br> "Young hollow, there are but two paths. Inherit the order of this world, or destroy it. But only a true monarch can make such a choice. Very few indeed have come even this far. And yet your journey is far from over. Half-grown hollow, have
you what it takes, truly?"</p>
<p><strong>3rd encounter</strong>
<br> "Young hollow, seek after Vendrick. He who almost became a true monarch. Vendrick is certain to guide your way Fledgling Hollow, may we meet again."</p>
<p><strong>Undead Crypt</strong>
<br> "Heheh, I believe we’ve been acquainted Young Hollow, conqueror of fear What drives you so to overcome this supposed curse?"
<br> "Life is brilliant. Beautiful. It enchants us, to the point of obsession. Some are true to their purpose though they are but shells, flesh and blood. One man lost his own body, but lingered on as a head. Others chase the charms of love,
however elusive. What is it that drives you?"
<br> "Once, the Lord of Light banished Dark, and all that stemmed from humanity And men assumed a fleeting form. These are the roots of our world Men are props on the stage of life, and no matter how tender, how exquisite A lie will remain a
lie. Young Hollow, knowing this, do you still desire peace?" Choice – No (asks for a yes or no) "Vendrick, the near true monarch, is here and not far off. But what is a king? You, neither born with greatness nor granted it by the fates, what
is it that you seek? You cannot even say yourself. We shall meet again, young Hollow."
</p>
<p><strong>Dragon Shrine</strong>
<br> "Young Hollow. How you grapple, without falter, with this dreadfully twisted world."
<br> "Peace grants men the illusion of life Shackled by falsehoods, they yearn for love, unaware of its grand illusion. Until, the Curse touches their flesh. We are bound by this yoke. As true as the Dark that churns within men."
<br> "All men trust fully the illusion of life. But is this so wrong? A construction, a façade and yet. A world full of warmth and resplendence. Young hollow are you intent on shattering the yoke spoiling this wonderful falsehood?
<p>Yes or no choice</p>
I am Aldia. I sought to shed the yoke of fate, but failed. Now, I only await an answer. Seek the throne. Seek light, Dark, and what lies beyond…"
</p>
<p><em>With peace Aldia probably means the linking of the flame. When the fire is linked the curse temporarily disappears, granting men the illusion called life.</em></p>
<p><strong>Throne of Want</strong>
<br> When entering the first time (speaks with many voices – a woman included): "Many monarchs have come and gone One drowned in poison, another succumbed to flame, Still another slumbers in a realm of ice. Not one of them stood here, as you
do now. You, conqueror of adversities. Give us your answer"
<br> Has no dialogue when re-entering</p>
<p><em>The voice of a woman is the voice of Shanalotte, a being created by Aldia, a part of him.</em></p>
<p><strong>After defeating Aldia:</strong>
<br> "I lost everything but remained here patiently The throne will certainly receive you But the question remains… What do you want, truly? Light? Dark? Or something else entirely…"</p>
<p><strong>When choosing to leave the throne room:</strong>
<br> "There is no path. Beyond the scope of light, Beyond the reach of dark… …what could possibly await us? And yet, we seek it, insatiably Such is our fate…"</p>
</details>
<details open>
<summary>
<h2 id="Items" class="anchor">Items</h2>
</summary>
<ol type="I">
<li>Aldia Hammer</li>
<li>Malformed Shell</li>
<li>Spitfire Spear</li>
<li>Aldia Key</li>
<li>Southern Ritual Band</li>
<li>Northern ritual Band</li>
<li>Sunset Staff</li>
<li>Soul Geyser</li>
<li>Unleash Magic</li>
<li>Forbidden Sun</li>
</ol>
</details>
<details open>
<summary>
<h2 id="Gallery" class="anchor">Gallery</h2>
</summary>
<p>Hello world I'm cool</p>
</details>
</div>
</div>
</html>

You can try using the :target pseudo-class and add it like this .anchor:target{padding-top:100px}
It will only add padding when using the anchor tag.

Custom card component not responsive when text and icon aligned on the same line

I have made my own custom card component to learn CSS and HTML from scratch.
This is my code for HTML:
<div class="col-12">
<div>
<div class="search-event-block">
<div class="search-event-icon-left">
<i class="icon-horse search-event-icon-left-size"></i>
</div>
<div class="search-event-block-inner">
<div class="search-event-block-title">
<label class="search-event-block-padding ">Title</label>
</div>
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle<i class="icon-basket search-event-icon-right-size"></i></label>
</div>
<div class="search-event-block-links ">
<label class="search-event-block-padding">Go block | Delete block</label>
</div>
</div>
</div>
</div>
</div>
And this is my code for css styling for the card component:
.search-event-block {
height: 87px;
margin-top: 10px;
background-color: #fff;
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-title {
font-size: 1.1rem;
font-weight: bold;
margin-top: 11px;
}
.search-event-block-subtitle {
font-size: 0.8rem;
}
.search-event-block-links {
color: #2E85DE;
cursor: pointer;
padding-top: 6px;
font-size: 0.8rem;
}
.search-event-icon-left {
background-color: #F2F3F7;
height: 87px;
width: 74px;
padding-top: 18px;
padding-left: 13px;
}
.search-event-icon-right {
font-size: 18px;
display: inline-block;
padding-top: 30px;
padding-right: 5px;
overflow: hidden;
}
.search-event-icon-left-size {
font-size: 33px;
color: #214A96;
}
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
padding-left: 84px;
}
.search-event-block-padding {
padding-left: 20px;
margin-bottom: 0px;
}
The problem is in the class: search-event-block-subtitle. I want the subtitle and the icon on the same line. The icon must align to the end of the card. This is working fine, but when I resize the window the icon goes under the subtitle. When the screen goes smaller I want that the icon still remains on the same line as the subtitle.
I used bootstrap only for the cols and rows. I have tried to something like this:
<div class="row">
//col6
label
//col6
icon
</div>
This didn't work for me
How can I align the subtitle and icon on the same line when the screen goes smaller?
I also have problems with the height it doesn't auto scale. How can I fix this problem?
I have made a jsfiddle:
https://jsfiddle.net/ptyagcdq/1/

First step is to update your subtitle layer to this:
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle</label>
<i class="icon-basket search-event-icon-right-size"></i>
</div>
This will keep the subtitle text separate from the icon and will give you better control over it. Then in your css add this class:
.search-event-block-subtitle label {
width: calc(100% - 84px);
display: inline-block;
}
And update the "search-event-icon-right-size" class to:
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
width: 60px;
display: inline-block;
vertical-align: top;
}
The width calculation in your search-event-block-subtitle label is 100% - 84px because you should subtract the icon's width and the search-event-block-subtitle label padding. You should adjust these numbers to the actual size of the icon you are going to use.
I hope this helps.

HTML layout renders differently on fiddle and on browser

I have made a small web page, the source code of which is available on FIDDLE. It uses a jquery plugin which I made for autocomplete.
The plugin adds a new div (.mridautocomplete-list) after the initialized inputs, which contains the autocomplete list :
<input id="test1">
<div class="mridautocomplete-list" style="display: block; left: 8px; width: 169px; position: absolute; background-color: white; border: 1px solid rgb(221, 221, 221); max-height: 150px; overflow-x: hidden; overflow-y: scroll; font-family: Arial; font-size: 13.3333px; z-index: 8888;">
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;"><span style="color: #4682B4; font-weight: bold;">a</span>aa</p>
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;">b<span style="color: #4682B4; font-weight: bold;">a</span>b</p>
</div>
<input class="test2">
<div class="mridautocomplete-list"></div>
<input class="test3">
<div class="mridautocomplete-list"></div>
The problem is :
This web page renders perfectly as expected on fiddle
But when I run the same code on my browser ( without fiddle ), it doesn't get displayed properly, shifting all elements ( SHOWN IN SCREENSHOTS ATTACHED )
Can anyone explain what might be causing the problem ?

Your .test2 class is a width of 80%.
The other inputs have a default width of 173px.
If you resize the fiddle window to a larger width, you will see the same issue.
To fix this you could add a display: block to your .test2 class.

Have you already tried the display CSS property? Setting the second input to "display: block" forces the 3rd input to the next line.
Another option is to place the autocomplete Javascript just before the closing body tag. This also worked for me in Chrome, Firefox and Safari.

How to increase the width of my twitter feed

I am trying to increase the width of the twitter feed displayed on my webpage, I added a Div id to it and tried increasing its size in css however it stops getting bigger after a certain point, Also I want to add images in my portfolio section which includes 3 random pictures of like computers which get bigger and change size when you hover over them in css, how do I do this? Also I can't figure out how to change the color of the background of the webpage, everything I have tried doesn't work. Thanks.
I have provided the HTML, CSS and JS code for my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<style>
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat', Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display: inline-block;
height: 500px;
width: 650px;
}
#twitter {
display: inline-block;
height: 300px;
width: 300px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</head>
<body>
<div class="mainlogo">
<div>Muhammed's
<br>Webpage
</div>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
#applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"><u>Basic Information</u></h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"><u>Curriculum Vitae</u></h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service
environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"><u>Portfolio</u></h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"><u>Report</u></h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</div>
</body>
</html>

Your Twitter feed has a width set in HTML property. Erase the property and move it to CSS. That should fix the Twitter thing. Edit: Remember that the height is set on Twitter > Settings > Widget > Height.
- EDIT 1 -
Now that I know your Twitter feed can't be controlled by you, you have to control the result of your Twitter script which will normally be 600px of height by default. No matter what this is, you know it will end up styling an iframe with the twitter-timeline CSS class, so you only need to overwrite the value like this:
.twitter-timeline {
height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}
- END EDIT 1 -
You just gave away all of your personal information to strangers around the web. You'll probably be spammed in a few seconds if they are true. I suggest you ONLY provide necessary code. There is a lot of CSS and HTML not related to the question, you can simply ask them in another question or explain them apart of each other.
To place pictures you can do many things, being them random means either JavaScript or preloaded with PHP. I imagine you would be loading them from your site, let's say /images/computers/ and give them a class, for instance photo. Then on CSS, you can do the following:
.photo {
height:200px;
}
.photo:hover {
height:400px;
}
That will make it bigger on hover using CSS. If you like to animate it, you might want to use other CSS properties. Search on the web, you'll find them.
- EDIT 2 -
So, looking at your pictures with the class photo, I see that you were not adding the % values correctly. You need to find a balanced value for each one of your images. In your case, we are playing with image padding, margin and width basically. So there are 3 images and you know that the percentage must reach something around 100%:
.photo {
background-color: white;
padding: 1%;
margin-left: 5%;
margin-bottom: 2%;
-webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
float: left;
width: 25%;
transition: all 0.25s ease-out;
}
According to this code I wrote for you, now the formula is:
(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%
6 times 1% because the padding will be added to both left and right of the picture.
- END EDIT 2 -
The background color of the website? That is just too basic. It depends on your needs, you can set your background color to the <html> or <body>. I'll use HTML:
html {
background-color:red;
}
With that, your website will have a red background. Of course you can use HEX, or rgb() or rgba() or color names, whatever you want.

Try this codes.
twitter frame having max-width="520" that is a boundary.portfolia images supported responsive also.
MAKE IT COOL,WE LOVE OUR CODING.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="homepage.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:500,700,800italic,600|Montserrat' rel='stylesheet' type='text/css'>
</head>
<div class="mainlogo">
<body>Muhammed's
<br>Webpage</body>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id = "twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by #applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio" style="height:250px">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
<ul class="portfolioimg" style="">
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
</ul>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</body>
</html>
<style>
body{
background-color:gray;
}
.portfolioimg {
clear: both;
display: block;
margin: 30px auto 0;
padding: 0;
position: static !important;
text-align: center;
width: 1000px;
background-color:transparent;
}
.portfolioimg > li {
background-color: transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none;
margin-right: 40px;
text-align: center;
}
.portfolioimg > li img{
width:200px;
}
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat' , Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa ;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display:inline-block;
height: 500px;
width: 650px;
}
#twitter {
display:inline-block;
height: 300px;
width: 520px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>

Slideshow using background images with navigation and captions

I have a div which currently has a static background image, and I need to create a slideshow of background images and text for this div. I would like to fade the background images and the caption text in and out. Does anyone know of a good way to do this using jQuery? My knowledge of JavaScript and jQuery is very limited. I tried to use some ready-made plugins as the Backstretch, Responsiveslides but I could not understand them enough and edit them for my use.
Here is my current code: http://jsfiddle.net/1zdyh3wo/
HTML
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
<div class="nav-wrapper">
<div class="nav-arrows prev"></div>
<div class="nav-dots">
<div class="current"></div>
<div class=""></div>
<div class=""></div>
</div>
<div class="nav-arrows next"></div>
</div>
</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* -- COMMON -- */
body {
font: 400 14px 'Montserrat', Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
}
.separator {
width: 24px;
height: 4px;
}
.separator.white {
background-color: white;
}
.separator.black {
background-color: black;
}
/* -- MENU -- */
/* -- CANVAS -- */
.content {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
right: 0;
bottom: 100px;
left: 0;
width: 33.333333333%;
margin: 0 auto;
}
.sectionTitle {
font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
line-height: 24px;
margin-bottom: 24px;
letter-spacing: 4px;
}
.sectionDescription {
font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;
margin-top: 24px;
}
/* -- SLIDER -- */
.bg-slider {
background: url(../img/slides/image1.jpg) no-repeat center center fixed;
background-color: red; /* demo purpose only */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* -- SLIDER - NAVEGATION -- */
.nav-wrapper {
display: inline-block;
min-width: 250px;
margin-top: 24px;
padding: 4px;
}
/* -- SLIDER - NAVEGATION ARROWS -- */
.nav-arrows {
float: left;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: 4px solid white;
}
.nav-arrows.prev {
border-top: none;
border-right: none;
}
.nav-arrows.next {
border-bottom: none;
border-left: none;
}
/* -- SLIDER - NAVEGATION DOTS -- */
.nav-dots {
margin: 0px 8px;
float: left;
}
.nav-dots div{
float: left;
width: 12px;
height: 12px;
margin: 4px 18px;
cursor: pointer;
border-radius: 50%;
background: rgba(255,255,255,.5);
}
.nav-dots .current:after {
float: left;
width: 12px;
height: 12px;
content: '';
border-radius: 50%;
background: white;
}
Here a visual aid, how I would like the result to be:
Desktop version:
Mobile version:

To keep things really simple:
Make a "wrapper" div for the entire slider
Make an individual "wrapper" div for each individual slide
Put the slider navigation outside of of the individual slides (I put it outside of the slider altogether, but that's your choice based on your desired positioning).
Make a function that will do all the transitions
Here's an example HTML structure, based on yours
<div id="slider">
<div class="content bg-slider active">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 2</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 3</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
</div>
</div>
</div>
Here's the functional JavaScript, with comments.
$(document).ready(function(){
// Hide all slides, re-show first:
$(".bg-slider").hide()
$(".bg-slider:first-child").show();
// Prev button click
$(".nav-arrows.prev").click(function(){
slidePrev();
})
// Next button click
$(".nav-arrows.next").click(function(){
slideNext();
})
// "Dots" click
$(".nav-dots div").click(function(){
slideTo($(this).index());
})
});
// "Previous" function must conclude if we are at the FIRST slide
function slidePrev() {
if ($("#slider .active").index() == 0) {
slideTo($("#slider .bg-slider").length - 1);
}
else {
slideTo($("#slider .active").index() - 1);
}
}
// "Next" function must conclude if we are at the LAST slide
function slideNext() {
if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
slideTo(0);
}
else {
slideTo($("#slider .active").index() + 1);
}
}
// Slide To will be called for every slide change. This makes it easy to change the animation, or do what you want during the transition.
function slideTo(slide) {
$("#slider .active").fadeOut().removeClass("active");
$("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
$(".nav-dots .current").removeClass("current");
$(".nav-dots div").eq(slide).addClass("current");
}
Finally, here's the updated Fiddle to demonstrate: http://jsfiddle.net/1zdyh3wo/1/