Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointscss trouble
@charset "UTF-8";
/* CSS Document */
/*Normalize Process*/
* {
box-sizing: border-box;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
/*base layout styles*/
* {
box-sizing: border-box;
}
.name {
font-size: 1.25em;
}
.main_nav {
text_align: center;
}
.main_nav li {
border: 1px solid black;
font-size: 1.2em;
background-color: #fff;
padding: 15px 20px;
margin-top: 6px;
margin-bottom: 6px;
}
.main_nav a {
font-size: .95em;
display: block;
text-decoration: none;
color: black;
}
.container {
padding-left: 1em;
padding-right: 1em;
}
.main_head {
text-align:center;
background-color: rgb(221, 225, 220);
padding: 1em 0;
}
.contact {
background-color: rgb( );
}
.main_footer {
background-color: rgb( 234, 114 , 93 );
}
/*mediq query for portable device*/
@media (min-width: 320px ) {
.container {
width: 70%;
max-width: 1000px;
margin: 0 auto;
}
.name {
text-align: center;
}
.main_nav li {
display:block;
}
}
@media (min-width: 768px ) {
#wrap {
min-height: calc( 100vh - 166px );
}
.container {
width: 80%
max-width: 1150px;
margin: 0 auto;
}
.main_head {
text-align: center;
}
.name,
.main_nav li {
display: inline-block;
}
}
@media (min-width: 1024px ) {
.container {
width: 100%
max-width: 1250px;
margin: 0 auto;
}
.name,
.main_nav,
.main_nav li {
display: inline-block;
}
}
```/
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Porfolio</title>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/styles.css"/>
</head>
<body>
<div id="wrap">
<header class="main_head">
<div class="container">
<h1 class="name">Le Var Range</h1>
<ul class="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<?php /* <img src="images/responsive-layout-profile.png" alt="varlerang" title="A picture of varlerang"/>
<div id="profile">
<p>Hello! I'm a front-end developer who loves responsive design and css. I recently accomplished learning front-end web development at Treehouse and am
excited to put all my creativity an skills to use!.
</p>
</div>
</div>
</header>
<div class="container">
<h2>Portfolio</h2>
<ul class="img">
<li>
<img src="images/portfolio-12.png" alt="pic_12" title="picture of marketing page"/>
<label for="marketing page">Marketing Page</label><p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
</li>
<li><img src="images/portfolio-2.png" alt="pic_2" title="picture of search page"/>
<label for="search page">Search Page</label><p>This project searches through a specific database to find information that the user is trying to look up.</p></li>
<li><img src="images/portfolio-3.png" alt="pic_3" title="picture of travel app"/>
<label for="travel app">Travel App</label><p>This project compares travel times based on different transportation methods and tells uou the best one.</p></li>
<li><img src="images/portfolio-6.png" alt="pic_6" title="picture of map of favorite spots"/>
<label for="Map of Favorite Spots">Map of Favorite Spots</label><p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p></li>
<li><img src="images/portfolio-14.png" alt="pic_14" title="picture of work planner app"/>
<label for="work planner app">Work Planner App</label><p>This project uses stickies to plan out your duties threw out the day and threw speech tells you when the next time another task that must be done.</p>
</li>
<li><img src="images/portfolio-7.png" alt="pic_7" title="picture of media player"/>
<label for="media player">Media Player</label><p>This project uses Media Player, one of the best video player and music player for Mac OS. It can handle all popular video formats including: mp4, wmv, avi, mkv, dv, rm, mp, mpeg, flv, divx, swf, dat, h264, h263, h261, 3gp, 3gpp, asf, mov, m4v, ogv, vob, vstream, ts.
Media Player finds all your videos automatically for you. And saves your time and disk space to transcoding or format converting. Just put your video on sdcard or click the URL in browser to watch it. Support sub: srt, ass, ssa, sub,txt, utf, smi, rt,aqt, jss, js, utf8, utf-8.
The Media Player load external subtitle with same name of video automatically and support .m3u playlist.</p>
</li>
</ul>
</div>
*/?>
<div class="container">
<h2>Contact</h2>
<p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
</label for="phone">Phone</label><p>+1(283)888-9100</p>
</label for="email">Email</label><p>email@varlerang.com</p>
</div>
<footer class="main_footer">
<p>Le Var Range</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</footer>
</div>
</body>
</html>
```
I am having trouble giving .name space between the .main_nav // i want the name and the list to be on opposite sides of the viewport. instead of how it looks together .. i tried giving it a margin-right property but it doesn't work correctly ... can someone help?
1 Answer
Cheryl Oliver
21,676 PointsTry this:
.name {
font-size: 1.25em;
float: left;
}
.main_nav li {
border: 1px solid black;
font-size: 1.2em;
background-color: #fff;
padding: 15px 20px;
margin-top: 6px;
margin-bottom: 6px;
float: right;
}