No entirely sure what happened, but I have a large gap after the top image. I've been tweaking the code so it's responsive and then added this image and everything got thrown off. Any thoughts on what I'm doing wrong. Ideally the image is much closer to the 2 columns of content below.
I've tried messing with the flexbox and the image and nada is happening.
html {
width: 960px;
font-size: 100%;
font-family: "Arial", sans-serif;
color: #112271;
margin: 0 auto;
}
.flex-container {
width: 960px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.banner-image {
width: 960px;
min-height: 50px;
background: #112271;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 10px;
}
.banner-image h1 {
color: white;
}
.topics-sidebar {
width: 320px;
padding-top: 40px;
}
.main-content {
width: 640px;
padding-top: 40px;
}
.individual-post {
margin-bottom: 50px;
}
.main-content p.return-link {
margin-bottom: 50px;
}
/* Left arrow for links that return to index.html */
i {
border: solid #112271;
border-width: 0px 2px 2px 0px;
padding: 5px;
display: inline-block;
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
ul {
list-style-type: none;
padding: 0;
line-height: 2;
}
a:link, a:visited {
color: #112271;
}
a:hover {
color: #F09F08 ;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="../html-visual/styles.css">
<title>HTML & CSS Cheatsheet</title>
</head>
<body>
<div class="flex-container">
<div class="banner-image">
<h1>HTML & CSS Cheatsheet</h1>
</div>
<div class="topics-sidebar">
<h3>Topics</h3>
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Flexbox</li>
<li>Forms</li>
<li>Images</li>
<li>Links</li>
<li>Lists</li>
<li>Responsive Design</li>
<li>Resources</li>
<li>Tables</li>
</ul>
</div>
<div class="main-content">
<h2>Recent Posts</h2>
<div class="individual-post">
<p>General Template | Last Updated Dec. 3, 2019</p>
<p>This is the basic layout for a webpage.</p>
</div>
<div class="individual-post">
<p>Linking a CSS File | Last Updated Dec. 3, 2019</p>
<p>Each HTML page must include a reference to the external style sheet file.</p>
</div>
<div class="individual-post">
<p>Box Model | Last Updated Dec. 3, 2019</p>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
You just have to get rid of
padding-top: 40px
at your .main-content and .topics-sidebar
Or change them to any value you want
A better solution is to set
margin-bottom : (YOUR_VALUE)px
to your .banner-image
Related
* {
box-sizing: border-box;
}
body {
font-family: 'Times New Roman', Times, serif;
padding: 10px;
background: #f1f1f1;
}
.header {
text-align: center;
background-color: rgb(255, 255, 255);
padding: 20px;
margin-bottom: 15px;
}
.header h1{
font-size: 30px;
}
.navbar {
overflow: hidden;
background-color: rgb(52, 52, 52);
position: sticky;
top: 0;
box-shadow: 5px 5px 10px rgba(52, 52, 52, 0.753);
}
.drop {
float: left;
overflow: hidden;
}
.drop .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.navbar .a {
float: left;
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
font-size: 20px;
}
.navbar .a:hover {
background-color: white;
color: black;
}
.drop-content {
display: none;
position: absolute;
background-color: rgb(234, 234, 234);
min-width: 160px;
z-index: 1;
}
.drop-content .a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.drop:hover .drop-content {
display: block;
}
.leftside {
float: left;
width: 75%;
}
.rightside {
float: left;
width: 25%;
padding-left: 20px;
}
.fakeimg {
background-color: rgb(176, 176, 176);
width: 100%;
padding: 20px;
}
div .fakeimg:hover {
border: 1px solid black;
cursor: pointer;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 30px;
text-align: center;
background-color: rgb(248, 248, 248);
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftside, .rightside {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<!--This is a link to the CSS.-->
<link rel="stylesheet" href="first_webpage.css">
<body>
<!--This is our header.-->
<div>
<header class="header">
<h1>First Webpage</h1>
</header>
</div>
<!--This is a navigation bar.-->
<div class="navbar">
Home
Projects
Contact
<div class="drop">
<button class="dropbtn">Dropdown
<i></i>
</button>
<div class="drop-content">
Link 1
Link 2
Link 3
</div>
</div>
About
</div>
<!--This is the first and main colum.-->
<div class="row">
<div class="leftside">
<div class="card">
<h2>Title One</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.1 City</figcaption>
<p>This is subsection title</p>
<p>This is the first paragraph of the main section.
This also my first webpage. It definitly looks
like something from the <i><a href="https://www.nytimes.com/">
New York Times</a></i>. It's coming out pretty good;
i just need to continue taking it one step at a time.
Nonetheless, I will contue on with this section and
not bore you. Enjoy the rest of my layout.</p>
</div>
<div class="card">
<h2>Title Two</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.2 Flowers</figcaption>
<p>This is a second section Title</p>
<p>This is a second paragraph, I really don't know
what to write. It's not like this is an engligh
101 class. i mean jesus. Talking about jesus, do
you know they're making a jesus game... i mean
what has the gaming industry come to?</p>
</div>
</div>
<div class="rightside">
<div class="card">
<h3>About Me</h3>
<div class="fakeimg" style="height: 100px;">Image</div>
<p>Some text about me so that the visiter may
know a bit more about the developer that they're
interested in...</p>
</div>
<div class="card">
<h3>Popular Posts</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Social Media</h3>
<p>Some social media pages that individuals can
follow me on....</p>
</div>
</div>
</div>
<!--This is a footer-->
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
I'm trying to create a dropdown menu for my dropdown button; as I create the dropdown button everything seems to be fine, however, once I put the position to "absolute" it does not allow me to view the content that is within the dropdown button even when I'm hovering over it. I tried changing the position to anything other than "absolute" and it does allow me to view the content, but it would either stretch the navigation bar down to make room for the options or place the content lower than where the button is located. Can anyone help me out with this problem? I provided the full code for my html and CSS because I think it may be clashing with another code.
I'm building a little play HTML page as I teach myself how to code. I've watched several walkthrough videos and want to incorporate what I've learned without watching the video so that it sticks better. Here is an image of what I'm dealing with.
I want these three sections, 'Learn HTML', 'Learn CSS3', and 'Learn Javascript' to be centered on the page. I created a <section ID=""> tag to center everything on the page under the showcase and 3 separate <div class=""> for each box.
My problem is two-fold, not only are the border boxes not centering on the page, but the boxes aren't even appearing.
Here's the code...
body {
background-color: #FFFAF0;
color: black;
font-family: garamond;
font-weight: normal;
margin: 0;
line-height: 1.6em;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#topheader {
background-color: #228B22;
color: white;
margin: auto;
padding: 15px;
text-align: center;
}
#navbar {
background-color: black;
color: white;
}
#navbar ul {
padding: 0;
list-style: none;
}
#navbar li {
display: inline;
margin: auto;
padding-right: 50px;
text-align: center;
}
#navbar a {
color: white;
text-decoration: none;
}
#showcase {
background-image: url('../coding/codage.png');
background-position: center right;
min-height: 300px;
margin-bottom: 30px;
text-align: center;
color: white;
}
#main {
width: 33.3% padding:10px;
margin: auto;
}
.top {
float: left;
border: 3px black;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ByMyself.css">
<meta charset="utf-8">
<title>How To Build A Website By Yourself</title>
</head>
<body>
<header id="topheader">
<div class="container">
<h1>Learning HTML5 and CSS3</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>Learning HTML5</li>
<li>Learning CSS3</li>
<li>About Us</li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>How to learn how to build a website from scratch! Code The Future!
</h1>
</div>
</section>
<div class="clr"></div>
<section id="main">
<div class="top">
<h2>Learn HTML5</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
<div class="top">
<h2>Learn CSS3</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
<div class="top">
<h2>Learn Javascript</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
</section>
</body>
</html>
There are a few problems:
FLOAT: What you need to do is apply both a width (of about a third) and a margin to your three .top elements. Note that the width should take the margins into consideration, which can be achieved by subtracting them with the calc() function. I've gone with margin: 0 20px; for a horziontal marign of20px and no vertical margin, along with width: calc(33% - 40px);, which takes both the left and right margins into consideration before finding 33% of the available width.
BORDER: You've applied a rule of border: 3px black, which is almost right; you're looking for border: 3px solid black; the solid is critical!
In addition to this, your 'list items' are <ol>, which stands for ordered list. You've essentially got multiple ordered lists inside of an unordered list. These should be list items (<li>) instead, inside of <ol> items, which would look like:
<ol>
<li>Step 1 - Watch Tutorials</li>
<li>Step 2 - Take Notes</li>
<li>Step 3 - Repeat Until It Sinks In</li>
</ol>
However, having said that, you'd benefit from simple <div> tags instead, as each point wants to be on its own line, and you're adding your own "Step 1" prefixes.
This can be seen in the following (click Run Code Snippet then Full Page):
body {
background-color: #FFFAF0;
color: black;
font-family: garamond;
font-weight: normal;
margin: 0;
line-height: 1.6em;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#topheader {
background-color: #228B22;
color: white;
margin: auto;
padding: 15px;
text-align: center;
}
#navbar {
background-color: black;
color: white;
}
#navbar ul {
padding: 0;
list-style: none;
}
#navbar li {
display: inline;
margin: auto;
padding-right: 50px;
text-align: center;
}
#navbar a {
color: white;
text-decoration: none;
}
#showcase {
background-image: url('../coding/codage.png');
background-position: center right;
min-height: 300px;
margin-bottom: 30px;
text-align: center;
color: white;
}
#main {
width: 33.3% padding:10px;
margin: auto;
}
.top {
float: left;
border: 3px solid black;
box-sizing: border-box;
text-align: center;
margin: 0 20px;
width: calc(33% - 40px);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ByMyself.css">
<meta charset="utf-8">
<title>How To Build A Website By Yourself</title>
</head>
<body>
<header id="topheader">
<div class="container">
<h1>Learning HTML5 and CSS3</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>Learning HTML5</li>
<li>Learning CSS3</li>
<li>About Us</li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>How to learn how to build a website from scratch! Code The Future!
</h1>
</div>
</section>
<div class="clr"></div>
<section id="main">
<div class="top">
<h2>Learn HTML5</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
<div class="top">
<h2>Learn CSS3</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
<div class="top">
<h2>Learn Javascript</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
</section>
</body>
</html>
Hope this helps!
So I have multiple divs. Like this:
<div id="LeftContent"></div>
<div id="RightContent"></div>
And so on. My goal is to create a centered div after all that. When I try to, I end up with the div being in the empty spaces between the 'left' and 'right' divs. An answer with some CSS code would be most appreciated.
HTML5:
<!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="utf-8">
<title>OneClickLearn</title>
</head>
<body>
<aside>
<br>
<nav>
<ul>
<li>Home</li>
<hr>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn the Basics of Web Design</li>
<hr class="nav">
<li>Learn PHP</li>
<li>Learn JAVASCRIPT</li>
</ul>
</nav>
</aside>
<a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
<header>
<div href="#" class="container">
<h1 class="title">OneClickLearn</h1>
</div>
</header>
</main>
<div class="header">
<div class="content">
<h1 class="large">Welcome To OneClickLearn</h1>
<hr class="hr">
<h2>A website for web developers everywhere</h2>
</div>
</div>
<div class="left">
<h1>What you can do with us</h1>
<h3>OneClickLearn offers several web design courses, as well as tools like Cascading Style Sheet libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
<a class="abutton"><button>Learn More</button></a>
</div>
<div>
<div class="right">
<h1>CSS Libraries</h1>
<h3>What's a CSS Library? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
<a class="abutton"><button>Learn More</button></a>
<a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>
</div>
<div class="left">
<h1>Courses</h1>
<h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
<a class="abutton"><button>Email Us</button></a>
<a class="abutton"><button class="buttonop">Learn More</button></a>
</div>
<div class="div">
<h1>Having trouble with your website?</h1>
<h3>We'll see what we can do.</h3>
<button class="abutton">Contact Us</button>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div {
clear: both;
margin: 0 auto;
height: 100px;
width: 600px;
text-align: center;
}
.greyback {
background-color: #4B4949;
}
.nav {
background-color: #bdc3c7;
}
.denied {
color: #bdc3c7;
}
.denied:hover {
cursor: not-allowed;
}
body {
size: 100%;
display: cover;
margin: 0;
padding: 0;
}
p a {
color: #27ae60;
text-decoration: none;
}
p a:hover {
color: #27ae60;
text-decoration: underline;
cursor: pointer;
}
.header {
color: white;
width: 100%;
height: 300px;
background-color: #2980b9;
}
.content {
margin-top: 70px;
padding-top: 60px;
text-align: center;
}
.large {
font-size: 40px;
}
.hr {
width: 100px;
}
.left {
margin: 20px;
float: left;
height: auto;
width: 50%;
color: #4B4949;
}
.right {
margin: 20px;
float: right;
height: auto;
width: 50%;
color: #4B4949;
}
a {
color: #2AABAD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.side {
margin: 20px;
}
.img {
display: inline-block;
}
button {
background-color: #2980b9;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
button:hover {
background-color: #3498db;
cursor: pointer;
}
.abutton {
color: none;
text-decoration: none;
}
.buttonop {
background-color: #3498db;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
.buttonop:hover {
background-color: #2980b9;
cursor: pointer;
}
.main {
width: 100%;
text-align: center;
}
.main-content {
display: inline-block;
}
P.S. I am using float:left; and float:right; for the left and right divs :)
Thanks :) (If I need any elaboration please let me know)
I'm not 100% clear on what you are asking, but you could try something like the following:
Html
<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>
CSS
div {
border: 1px solid #f0f;
height: 50px;
box-sizing: border-box;
width: 400px;
}
#LeftContent,
#RightContent {
float: left;
}
#CentredDiv {
width: 800px;
clear: left;
}
Yeah, not totally sure what you want, but maybe something like this?
#CenteredContent {
clear: both;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
What I understand from your question is that you need a centered div. You can do this to achieve centered div.
HTML:
<div class="centered-div">
Some Content
</div>
CSS:
.centered-div {
width: 400px;
min-height: 400px;
margin: 0 auto;
clear: both;
}
I hope that helps :)
I have the following page (see code snippet below). I would like to position each of the items, so that when it is a full web page, the elements are i their desired positions, but as soon as it is viewed on narrow aspect ratio (e.g. mobile phone), then the items need to fold under each other.
I can get a full web page working, using position: absolute;. I can position the items where I want. But the problem is then on a mobile devise, the items overlap each other. So I figure I need to use position: relative;.
position: relative; allows the items to fold beneath each other on a narrow browser. However, I cannot seem to position the items where I want.
In the below example, I would like to position the items as follows:
logo
title
text screen-print-one
google apple web screen-print-two
Terms of Service some#email.com
body {
font-family: "proxima-nova" ,"Helvetica", sans-serif;
}
/* logo */
.wz-logo {
text-align: center;
padding: 20px 20px 0px 20px;
}
/* title */
.wz-title {
font-size: 120%;
color: #B2D137;
text-align: center;
padding: 0 20px 40px 30px;
}
/* text */
.text-description {
padding-left: 10%;
padding-bottom: 20px;
padding-top: 20px;
width: 500px;
}
/* screen-prints */
.screen-prints {
position: relative;
float: right;
padding-right: 10%;
}
.screen-print1 {
position: relative;
top: 100px;
left: 0;
z-index: 2;
}
.screen-print2 {
position: relative;
top: -430px;
left: -120px;
z-index: 1;
}
/* store */
.store-container {
display: flex;
justify-content: left;
align-items: center;
padding-left: 10%;
}
.store-container .apple, .img-container .google, .img-container .web {
padding: 10px;
padding-left: 20px;
}
.store-container .google {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 10px;
}
.store-container .apple {
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
.store-container .web {
padding-top: 15px;
}
/* footer */
footer .terms, footer .contact {
display:inline-block;
padding-bottom: 30px;
padding-right: 10px;
padding-left: 10px;
}
footer .contact {
padding-right: 40px !important;
}
footer a {
color: white;
text-decoration: none;
font-size: 14px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
footer {
position:absolute;
bottom:0;
right: 0;
}
<body class="background-image">
<div class="wz-logo">
logo
</div>
<div class="wz-title">
title
</div>
<div class="text-description">
text
</div>
<div class="screen-prints">
<div class="screen-print1">screen-print-one
</div>
<div class="screen-print2">screen-print-two
</div>
</div>
<div class="store-container">
<div class="google">
google
</div>
<div class="apple">
apple
</div>
<div class="web">
web
</div>
</div>
<footer>
<div class="terms">
Terms of Service
</div>
<div class="contact">
some#email.com
</div>
</footer>
</body>
If anyone can assist with how I can position the items, I would appreciate the help. (As you can see my main problem is trying to position the screen-print-one & screen-print-two).
Thanks
hmm there are a bunch of problems with your html logic. too many divs and not wrapped logically . but i made what i could with it
see below. or jsFiddle
.wz-logo,.wz-title {
width:100%;
float:left;
text-align:center;
}
.left_text {
float:left;width:50%;
}
.left_text .store-container div{
display:inline
}
.screen-prints {
float:right;
width:50%;
text-align:right;
}
footer {
float:left;
width:100%;
text-align:right
}
footer div {
display:inline
}
#media only screen and (max-width: 460px) {
.left_text,.screen-prints,footer {
width:100%;
text-align:center;
}
}
<body class="background-image">
<div class="wz-logo">
logo
</div>
<div class="wz-title">
title
</div>
<div class="left_text">
<div class="text-description">
text
</div>
<div class="store-container">
<div class="google">
google
</div>
<div class="apple">
apple
</div>
<div class="web">
web
</div>
</div>
</div>
<div class="screen-prints">
<div class="screen-print1">screen-print-one
</div>
<div class="screen-print2">screen-print-two
</div>
</div>
<footer>
<div class="terms">
Terms of Service
</div>
<div class="contact">
some#email.com
</div>
</footer>
</body>
i suggest you use bootstrap for responsiveness . it's much easier to use
I am realtively new to HTML/CSS and working on a responsive site. I'm sure I have some improper techniques at this point but aesthetically things are working okay for me so far. MY problem is functional when my screen size gets below full view. Around 768 only 1 link (the contact link) seems to work and I'm not sure why. Any help would be much appreciated! Thanks!
HTML:
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>my<br/>name</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>Footer Text</p>
</div>
</div>
</body>
</html>
CSS:
body {
max-width: 90%;
margin: 0 auto;
font-size: 100%;
}
h1 {
font-family: 'bikoblack';
text-transform: uppercase;
font-size: 3em;
line-height: 85%;
color: #2d9471;
background-color: #1a5642;
float: left;
padding: 1em;
}
#header {
overflow: hidden;
z-index: "";
}
#nav {
position: relative;
top: 11em;
margin-bottom: 1 em;
}
li {
display: inline;
font-family: 'bikoregular';
color: #2d9471;
padding: 4em;
}
#feature{
margin: 1%;
background-color: #1a5642;
padding: 5em;
}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;
background-color: #1a5642;
}
.column3 {
margin-right: 0%;}
}
#feature, .article {
margin-bottom: 1em;
}
#media (max-width:480px){
#nav {
position: relative;
top:.05em;
width:200px;
}
}
#media (max-width:767px) and (min-width:481px){
#nav {
position: relative;
top: 5em;
}
}
The list items in your navigation have a large padding and they are also positioned inline. When they break on the next line (because there is not enough horizontal space) they overlap. The padding of the ones coming last in the list extend over the links above and cover them up. That's why you can't click them.
Try this as a quick fix:
li {
display: inline;
font-family: 'bikoregular';
color: #2d9471;
padding: 0 4em; /* removed padding at the top and bottom */
}