I have this sample:
link
CODE HTML:
<div class="row">
<div class="col-md-push-8 col-md-4 small-menu">
List your Property
<ul class="list-inline">
<li>Travelor Login</li>
<li>Owner Login</li>
</ul>
</div>
</div>
CODE CSS:
.small-menu .orange-menu {
background: #ed7103;
font-size: 18px;
padding: 18px;
font-weight: 500;
}
a{
display: inline-block;
}
.small-menu .list-inline {
overflow: auto;
background: rgba(31,106,138,0.7);
margin: 0px;
vertical-align: bottom;
display: inline-block;
padding: 14px;
}
How can I make div (".small-menu .list-inline") to occupy all the remaining space until the end?
I want to keep elements of the same height and position
Can you help me to solve this problem?
Thanks in advance!
Flexbox can do that:
.small-menu {
display: flex;
align-items: flex-end;
}
.small-menu .orange-menu {
background: #ed7103;
font-size: 18px;
padding: 18px;
font-weight: 500;
}
.small-menu .list-inline {
overflow: auto;
background: rgba(31, 106, 138, 0.7);
margin: 0px;
vertical-align: bottom;
flex: 1;
display: flex;
align-items: center;
padding: 14px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-push-8 col-md-4 small-menu">
List your Property
<ul class="list-inline">
<li>Travelor Login
</li>
<li>Owner Login
</li>
</ul>
</div>
</div>
Related
I want to make header like on the photo:
Now it looks like that:
header
Here is the html code:
<header class="header">
<div class="container">
<nav class="navBar">
<div class="navBar-wrapper">
<div class="img-logo">
<img src="./img/logo.jpg" alt="" srcset=""></div>
<div class="home">Home</div>
<div class="aboutUs">About us</div>
<div class="findSpace">Find space</div>
<div class="share-space">Share space</div>
<div class="promoteSpace">Promote space</div>
</div>
</nav>
</div>
</header>
And here is css:
Is there any way to add space between logo and move the navigation to the left?
body{
font-family:"Poppins",sans-serif;
font-weight: 400;
}
.container{
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
.header{
height: 112px;
width: 100%;
background: #fff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
}
.navBar-wrapper div{
font-size: 16px;
line-height: 24px;
color: #323232;
margin-top: 28px;
}
.home{
font-weight: 700 !important;
color:#F78434 !important;
}
How can I make a space between logo and nav?
Tried to access second child using nth-child(2), but that didn't work.
Code snippet: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
You can do that by simply applying margin-right: auto; to the img-logo-container.
Note that this will affect the parent containers justify-content: space-between;, so I would suggest applying another CSS-property such as gap: 10px; to navBar-wrapper.
Alternatively, you could wrap all the links in the navbar inside another container for better control in your navbar.
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
}
.img-logo img {
max-width: 100px;
}
.img-logo {
margin-right: auto;
}
.container {
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
.header {
height: 112px;
width: 100%;
background: #fff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.navBar-wrapper div {
font-size: 16px;
line-height: 24px;
color: #323232;
margin-top: 28px;
}
.home {
font-weight: 700 !important;
color: #F78434 !important;
}
<header class="header">
<div class="container">
<nav class="navBar">
<div class="navBar-wrapper">
<div class="img-logo">
<img src="https://4m4you.com/wp-content/uploads/2020/06/logo-placeholder.png" alt="" srcset=""></div>
<div class="home">Home</div>
<div class="aboutUs">About us</div>
<div class="findSpace">Find space</div>
<div class="share-space">Share space</div>
<div class="promoteSpace">Promote space</div>
</div>
</nav>
</div>
</header>
I have an image ('repairPic') I would like to align to the right which is no problem, and two elements ('repairTitle & repairBtn') I would like to stack on top of each other on the left side. I would like to use flexbox because I think it's a great way to set up a site.
I'm pretty new to html and css and this is the first real project I'm working on so any help would be much appreciated!
Here's the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Quandtico | Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header id="top" class="main-header">
<div class="top-nav">
<ul class="info">
<li>quandticoguitars#gmail.com</li>
<li>810-304-2166</li>
<li id="f1"><img class="fbook" src="imgs/facebook-f-brands.svg"/></li>
</ul>
</div>
<div class="main-nav">
<ul class="nav">
<li><h2>Quandtico</h2></li>
<li id='home'><a href='#'>Home</a></li>
<li><a href='#'>Repair Rates</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Custom Guitars</a></li>
</ul>
</div>
</header>
<div class="intro">
<h1 id="quandtico">QUANDTICO GUITARS & REPAIRS</h1>
<p>Looking for a new guitar? Need a repair done that you want done right? We’ve got it all here at Quandtico. Whether you’re looking for a custom built guitar, the highest quality repair, or just a tune up, we’ve got you covered. We’re located in the thumb of Michigan , and we make sure our customer receives only the best quality products and service. Contact us today to see what we’ve got in store for you!</p>
</div>
<div class="main">
<div class="repair">
<ul id="repairList">
<li class="repairTitle">
<h4>Repair</h4>
</li>
<li class="repairBtn">
<button>Repair Rates</button>
</li>
<li>
<img id="repairPic" src="imgs/bald-eagle-flying-water.jpg"/>
</li>
</ul>
</div>
<div class="build">
<h4>Build</h4>
<button class="build-btn">Custom Guitar</button>
<img id="buildPic" src="../"/>
</div>
<div class="best">
<img src="../"/>
<h4>Only The Best</h4>
</div>
</div>
<div class="contact">
<form action="index.html" method="post">
<h1>Contact</h1>
<fieldset>
<input placeholder="Name" type="text" id="name" name="user_name">
<input placeholder="Email" type="email" id="mail" name="user_email">
<input placeholder="Subject" type="text" id="subject" name="subject">
<textarea placeholder="Message" cols="50">
</textarea>
<button class="send">Send</button>
</fieldset>
</form>
</div>
<footer class="foot">
<p>quandticoguitars#gmail.com</p>
<img class="fbook" src="imgs/facebook-f-brands.svg"/>
<p>© by Quandtico.</p>
</footer>
</body>
</html>
And here's the CSS. I'm looking specifically at the Repair and Build Sections. Right now I'm only working on the "repair" div. Once I get that figured out I can move on to the build section.
/* Base Styles ------*/
* {
box-sizing: border-box;
}
body {
font-family: 'Anton', sans-serif;
background-color: #fbeee6;
margin: 0;
display: flex;
flex-direction: column;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #fbeee6;
}
h2 {
letter-spacing: .2em;
font-size: 2em;
padding-left: .8em;
margin-right: auto;
}
.fbook {
width: 1em;
height: 1em;
}
/* Header Section ---- */
.main-header {
background-color: #284c5e;
color: #fbeee6;
}
.top-nav {
margin-top: 1em;
border-bottom: 1px solid rgba(251, 238, 230, .25);
}
.top-nav .info {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: 15%;
padding-right: 15%;
}
.main-nav {
margin-top: -1em;
}
.main-nav .nav {
display: flex;
flex-direction: row;
padding-left: 15%;
padding-right: 15%;
}
.nav li {
display: inline-flex;
align-items: center;
}
#home {
margin-left: auto;
}
.info a {
text-align: center;
display: block;
padding: .85em 1.3em;
}
.nav a {
padding-left: 1em;
}
#f1 {
margin-left: auto;
}
/* Intro Section -----*/
.intro {
width: 100%;
height: 38em;
color: #fbeee6;
text-align: center;
vertical-align: middle;
background: url('../imgs/E-kit.jpg') no-repeat center;
background-size: cover;
}
#quandtico {
letter-spacing: .1em;
font-size: 5em;
text-align: center;
margin: 2em 20% 0 20%;
}
.intro p {
margin-left: 25%;
margin-right: 25%;
line-height: 1.5em;
}
/* Repair and Build Sections -----*/
#repairList {
display: flex;
flex-wrap: wrap;
height: 569px;
width: 100%;
justify-content: space-between;
}
#repairPic {
display: block;
margin-left: auto;
}
.repairTitle {
display: inline-flex;
margin: auto;
}
.repairBtn {
margin: auto;
}
One solution is to merge the first two li tags into one, wrapping each in a div.
<ul id="repairList">
<li>
<div class="repairTitle">
<h4>Repair</h4>
</div>
<div class="repairBtn">
<button>Repair Rates</button>
</div>
</li>
<li>
<img id="repairPic" src=""/>
</li>
</ul>
Setting the h4 and button to display: block will also work if you'd prefer to avoid the extra divs.
These solutions avoid the common issues that arise from float positioning.
You could modifiy ccs of id repairList.
#repairList {
display: flex;
flex-wrap: nowrap;
height: 569px;
/* width: 100%; */
justify-content: space-between;
display: block;
float: right;
clear: right;
.repair {
display: flex; /*added*/
text-align: center;/*added*/
}
#repairList {
/* display: flex */remove
flex-wrap: wrap;
height: 569px;
width: 100%;
justify-content: space-between;
}
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 4 years ago.
I'm trying to move the register button from the middle to the right (as see on the following photos) Without it affecting the 3 items in the middle.
So this is what I have:
This is what I'm trying to get:
Here is my code:
body {
background-color: #323642;
}
.menubar {
justify-content: center;
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
align-items: center;
height: 100%;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 22px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
#login_button {
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<head lang="Eng">
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button id="login_button">Register</button>
</div>
</body>
I have tried adding margin-right:auto; though it just completly shifter the button to the right and didn't leve any space between it and the window. I have also tried adding justify-content: space-between; but it didn't give me what I wanted. if anyone could help that would be greatly appreciated!
you can put the position of the button absolute like this :
#login_button {
position: absolute;
right: 10px;
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
https://jsfiddle.net/fh3cj02d/
You could use a flexbox inside a flexbox like this
body {
background-color: #323642;
}
.menubar {
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
height: 100%;
}
.left {
flex: 1;
}
.middle {
display: flex;
}
.right {
flex: 1;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 22px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
#login_button {
margin-top: 2px;
margin-right: 10px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<html>
<head lang="Eng">
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div class="menubar" id="hey">
<div class="left"></div>
<div class="middle">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
</div>
<div class="right">
<button id="login_button">Register</button>
</div>
</div>
</body>
</html>
I like this because it's purely flexbox, no absolute positioning or margin auto. Also the .middle div is naturally centered this way.
One way to accomplish this is to make the left margin of the first and last item auto. In this example, you would apply a left margin to .menuitem:last-of-type and #login_button.
body {
background-color: #323642;
}
.menubar {
justify-content: center;
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
align-items: center;
height: 100%;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 12px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
.menuitem:first-of-type {
margin-left: auto; /* NEW */
}
#login_button {
margin-left: auto; /* NEW */
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 12px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button id="login_button">Register</button>
</div>
</body>
I think you can just edit your body this way:
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button class="festa" id="login_button">Register</button>
</div>
and add this css class:
.festa {
position: absolute;
right: 0px;
}
This will keep the 3 buttons in the perfect center of the screen and the register one to the right, but they will overlap onto small screens.
This is the fiddle: https://jsfiddle.net/5xbnhkcr/
Otherwise you can play with flexbox weights (this is similar to your desired result)
modify body this way:
<body>
<div class="menubar" id="hey">
<div class="buttons">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
</div>
<button class="festa" id="login_button">Register</button>
</div>
and add those css classes:
.buttons {
flex: 9;
justify-content: center;
display: flex;
flex-direction: row;
}
.festa {
flex: 1;
}
Using flex: 9; and flex: 1; will divide the div into 10 parts.
The part containing the 3 buttons will occupy 9/10 of the width and the register button 1/10.
here's the fiddle: https://jsfiddle.net/e5hp2v7L/
I am trying to replicate a full-width rectangle div on a website but I'm having problems with responsiveness and mobility.
Here's an example of what I'm trying to replicate.
And here's what I have so far.
The problem is that the text won't go inside the separate boxes and it breaks in mobile version.
Here's my snippet:
HTML
<div class="row remove-container">
<div class="speech-bubble1 test-text">
<div class="row">
<h3 class="strong-text felinetitle">ADD</h3>
</div>
<div class="row">
<ul id="feline-ul">
<li>
<h6>Heartworm Test</h6>
</li>
<li>
<h6>$25</h6>
</li>
</ul>
</div>
</div>
<div class="speech-bubble speech-bubble-top">
<div class="container" style="padding-top: 35px; padding-bottom: 35px;">
<h3 class="strong-text felinetitle2">
A LA CARTE </h3>
<div class="row">
<div class="col-lg-9">
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-6">
DHPP or DHLPP
</div>
<div class="col-sm-6">
Canine Flu
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.speech-bubble {
position: relative;
background-color: #045faf;
width: 100%;
height: 150px;
color: white;
text-align: center;
font-family: sans-serif;
}
.speech-bubble1 {
position: absolute;
background-color: #045faf;
width: 32%;
height: 150px;
left: 0;
color: white;
text-align: center;
z-index: 1;
font-family: sans-serif;
}
.remove-container {
margin: 0 !important;
padding: 0 !important;
}
.serviceprice {
display: flex;
justify-content: center;
padding-top: 50px;
}
.speech-bubble {
position: relative;
background-color: #045faf;
width: 100%;
height: 150px;
color: white;
text-align: center;
font-family: sans-serif;
}
.speech-bubble1 {
position: absolute;
background-color: #045faf;
width: 32%;
height: 150px;
left: 0;
color: white;
text-align: center;
z-index: 1;
font-family: sans-serif;
}
.remove-container {
margin: 0 !important;
padding: 0 !important;
}
.serviceprice {
display: flex;
justify-content: center;
padding-top: 50px;
}
#feline-ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#feline-ul li{
float: left;
margin-left: 70px;
}
#feline-ul2{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#feline-ul2 li{
float: left;
margin-left: 70px;
}
.test-text{
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
}
I'm having problems on the second box with my texts not compressing into a square/container. It just goes full width.
I just recreated your structure to show you an minimal example.
tl;dr; Your bootstrap code is not property nested.
What did i do?
I wrapped the row into a container. A container is the element which wraps all rows in it. There is a .container and .container-fluid where the .container-fluid is for full-width layouts. Below a container is a row. A row is always split into 12 parts in bootstrap. You can specify the amount of columns for each display width. Read up on the width breakpoints at the bootstrap grid doc. You will NEVER want to have a .row with a nested .row. A row is always a parent of a column. If you resize my example you will notice that these two columns (.col-md-8 and .col-md-4) are resizing to two 12-width column on small size devices.
And if you have key-value pairs as data i'd recommend to use tables instead of listings. This is just a semantical tip. A list covers just an enumeration like a shopping list. Instead a table is suited for object-like formatting (starting at one attribute): e.g. a dish which has a price.
*{
color: white;
}
footer{
background-color: #045faf;
padding: 20px;
}
#footer--left, #footer--right{
padding: 0 20px;
}
#footer--left{
-webkit-box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
}
table{
width: 100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<div class="container">
<div class="row">
<div id="footer--left" class="col-md-4">
<h3>Some Head Text</h3>
<table>
<tr>
<td>Value</td>
<td>25$</td>
</tr>
</table>
</div>
<div id="footer--right" class="col-md-8">
<h3>Some Head Text</h3>
<table>
<tr>
<td>Value</td>
<td>25$</td>
</tr>
</table>
</div>
</div>
</div>
</footer>
Well, your example of code appears to me too overloaded. I would do in this way:
.blocks {
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.blocks .block {
border: 1px solid #000;
height: 150px;
}
.blocks .block h3 {
text-align: center;
padding: 0;
margin: 0;
}
.blocks .block ul {
list-style-type: none;
padding-left: 0;
}
.blocks .block ul li {
padding: 0 0 0 15px;
margin: 0;
}
.blocks .block ul li:nth-child(1n) {
display: inline;
}
.blocks .block:first-child {
width: 33%;
}
.blocks .block:last-child {
width: 66%;
}
<div class="blocks">
<div class="block">
<h3>Add</h3>
<ul>
<li>Service 1</li>
<li>5$</li>
<br>
<li>Service 2</li>
<li>10$</li>
<br>
<li>Service 3</li>
<li>15$</li>
</ul>
</div>
<div class="block">
<h3>Add</h3>
<ul>
<li>Service 1</li>
<li>5$</li>
<br>
<li>Service 2</li>
<li>10$</li>
<br>
<li>Service 3</li>
<li>15$</li>
</ul>
</div>
</div>
I have some divs.
I am using a Grid system and I cannot for the life of me figure out how to stop divs from pushing others down.
When I try to set the margin top to say 50px for the border div it pushes everything else down.
I do not want to use position absolute due to being responsive grid system.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
margin-top: 100px;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top:;
}
<div class="cover">
<div class="grid">
</div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
</div>
On the border div, you can remove the margin and add:
position: relative;
top: 50px;
Seems to me that the problematic margin is here:
ul {
margin-top: 100px;
}
Remove or shrink that and add your margin to .border as intended.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top: 50px;
;
}
<div class="cover">
<div class="grid"></div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
Try using:
position: relative;
top: 50px;
Here is a pen: http://codepen.io/anon/pen/GpyMKp
For your border div. This is a way to move an element from it's usual position without affecting the other divs.
Although I feel like you would be better off just reducing the margin-top on your ul element, and you could achieve the same layout without it being a sort of "hacky" solution.