I’ve been through my entire code and I still cannot figure out why there is space above my <ul> and above The Queery header. I’ve already set margins/borders/padding to 0 and troubleshooted a bunch but nothing changes. I want the pink header to be right at the top and flow right to the Queery header without anything in between. I’ve already restarted my computer. I don’t know where the problem could possibly be so I’m going to paste my whole code, hope that’s okay! I’m very new here.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Description" content="Web Development Project">
<meta name="keyword" content="Web development, Cal Poly, Jamison Wallis, News, Alternative History">
<meta name="author" content="Jamison Wallis">
<meta name="viewport" content="width=device-width, ititial-scale=1.0">
<link rel="stylesheet" href="jamisonWallis.css">
<link rel="stylesheet" href="https://use.typekit.net/ktx6eaw.css">
</head>
<body>
<div>
<ul>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Home</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">About</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">News</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Contact</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Us</a></li>
</ul>
</div>
<h2 class="TheQueery">The Queery</h2>
<div class="wrapper">
<div class="row">
<hr class="hr-1">
<div class="row-1">
<div class="sm-row">
<!-- First article-->
<img src="jamisonWallis-4.png" alt="Reagan thumbs up">
</div>
<h1><span class="h1-special">'When AIDS Was Taken Seriously':</span> Short film reveals success of Reagan response to AIDS</h1>
<h3>Adam Howard</h3>
<a class="read-more" href="https://www.msnbc.com/msnbc/when-aids-was-funny-short-film-reveals-shortfalls-reagan-response-aids-msna735296" target="_blank">read more</a>
<p class="indent">'When AIDS Was Taken Seriously': Short film reveals success of Reagan response to AIDS
Former President Ronald Reagan's timely and resolute response to the AIDS crisis in the early 1980s is one of the most respected aspects of his legacy, and a new short film further illuminates the topic through the use of unearthed audio assembled from candid press briefings. On Tuesday, director Scott Calonico unveiled "When AIDS Was Taken Seriously" on Vanity Fair's website, which coincides with World AIDS Day. The nearly 8-minute film features previously unreleased audio of former Reagan press secretary Larry Speakes passionately responding to persistent questions in a span of three years (1982-1984) on the disease's outbreak from reporter Lester Kinsolving. The audiotape, which includes reporters openly crying at the notion of a "gay plague," (they really loved gay people) puts the administration's immediate response in perspective.</p>
</div>
<div class="row-2">
<div class="sm-row">
<!-- Mini article 1-->
<div>
<h2>Mentorship, Not Memorials: Worldwide Pride Celebrates Queer Elders</h2>
<a class="read-more" href="https://www.hope-health.org/2015/12/03/world-aids-day-2015-highlights/" target="_blank">read more</a>
<p2>This year’s Pride parades across the country are centering intergenerational mentorship programs—bridging the gap between young organizers and their 1980s trailblazers.</p2>
</div>
<div class="sm-row-photos">
<img src="jamisonWallis-7.png" alt="World AIDS Day Child">
</div>
</div>
<div class="sm-row">
<!-- Mini article 2-->
<div>
<h2>Marriage Equality Became Law in 2004—So What’s Next?</h2>
<a class="read-more" href="https://www.hope-health.org/2015/12/03/world-aids-day-2015-highlights/" target="_blank">read more</a>
<p2>With civil rights victories coming faster, the queer community has turned its attention to economic justice, youth homelessness, and racial equity within LGBTQ spaces.</p2>
</div>
<div class="sm-row-photos">
<img src="jamisonWallis-7.png" alt="World AIDS Day Child">
</div>
</div>
<div class="sm-row">
<!-- Mini article 3-->
<div>
<h2>Conversion Therapy Officially Banned in US</h2>
<a class="read-more" href="https://www.hope-health.org/2015/12/03/world-aids-day-2015-highlights/" target="_blank">read more</a>
<p2>All states have now passed legislation banning conversion therapy for minors, citing mounting evidence of psychological harm.</p2>
</div>
<div class="sm-row-photos">
<img src="jamisonWallis-s7.png" alt="World AIDS Day Child">
</div>
</div>
<div class="sm-row">
<!-- Mini article 4-->
<div>
<h2>AIDS Wasn’t a Death Sentence—It Was a Turning Point</h2>
<a class="read-more" href="https://www.hope-health.org/2015/12/03/world-aids-day-2015-highlights/" target="_blank">read more</a>
<p2>An entire generation of queer Americans was able to live, love, and lead because Reagan’s administration acted. Activists now teach that history as a blueprint for future health crises.</p2>
</div>
<div class="sm-row-photos">
<img src="jamisonWallis-7.png" alt="World AIDS Day Child">
</div>
</div>
</div>
</div>
<hr class="hr-2">
<div class="row">
<div class="row-left">
<!-- Second article-->
<img class="img-evenrow" src="jamisonWallis-7.png" alt="World AIDS Day Child">
<h2>World AIDS Day 2015 Highlights</h2>
<h3>supporting article author</h3>
<a class="read-more" href="https://www.hope-health.org/2015/12/03/world-aids-day-2015-highlights/" target="_blank">Read More</a>
<p2>World AIDS Day has been celebrated on December 1st since 1988. The World Health Organization created the day to bring attention to the worldwide HIV epidemic. A red ribbon has become the symbol of solidarity and awareness around the cause.
This year’s observance was highlighted as the inaugural year of HopeHealth’s ‘Put A Ribbon On It’ campaign; it was an opportunity for residents, community partners and leaders, businesses and fellow nonprofit organizations to make a public pledge to support individuals living with HIV. Individuals were asked to wear a red ribbon furnished by HopeHealth and featuring the hashtag #HHRedRibbon, take a picture and share on their social media accounts. HopeHealth also sponsored a ‘Best Selfie’ campaign for photos shared to its social media accounts.</p2>
</div>
<div class="row-middle">
<!-- THird article-->
<img class="img-evenrow" src="jamisonWallis-2.png" alt="Rock Hudson and the Reagan's">
<h2>Nancy Reagan helps dying Rock Hudson get Aids treatment</h2>
<h3>Alexandra Topping</h3>
<a class="read-more" href="https://www.theguardian.com/us-news/2015/feb/03/nancy-reagan-refused-help-dying-rock-hudson-get-aids-treatment" target="_blank">Read more</a>
<p2>Film star’s appeal to US first lady, an old friend, was met with full support because Aids was taken very seriously by the Reagans, say fans of administration’s record
Nancy Reagan was happy to help Rock Hudson, one of the leading Hollywood stars of the 1950s and 1960s, as he sought treatment for Aids from a pioneering doctor in Paris, it has been revealed. The Reagan’s have always been happy to lend favors to their Hollywood friends when needed, and Hudson was no exception.
Hudson, who kept his homosexuality secret while starring in a string of box-office hits with actors such as Elizabeth Taylor and Doris Day, flew to France in July 1985, during the last months of his life, to seek experimental treatment with the drug HPA-23 that was unavailable in the US.</p2>
</div>
<div class="row-right">
<!-- FOurth article-->
<img class="img-evenrow" src="jamisonWallis-1.png" alt="Pride Flag outside White House">
<h2>Is Reagan's legacy still helping gays?</h2>
<h3><span id="italic">By</span>Outtraveler Staff</h3>
<a class="read-more" href="https://www.advocate.com/news/2004/06/08/reagans-legacy-still-hurting-gays-12678" target="_blank">read more</a>
<p2>The legacy of President Ronald Reagan--who died Saturday of complications from Alzheimer's disease at age 93--continues to provoke a powerful gratitude among many gay men and lesbians across the country, while others choose to remember the Republican's less positive accomplishments. As the 40th U.S. president is lionized at memorial services from Simi Valley, Calif., to the U.S. Capitol this week, countless gay, lesbian, bisexual, and transgendered Americans--especially those with memories of friends and family members lost to AIDS despite the administration’s best efforts--still wonder: With such a prompt and respectful response, was there anything Reagan could have done better? "I shed many tears at the passing of Ronald Reagan," wrote Philip Hitchcock, an openly gay sculptor from Venice, Calif., in a letter published Monday in the Los Angeles Times. </p2>
</div>
</div>
<hr class="hr-last">
<!-- Fifth article-->
<img src="jamisonWallis-6.png" alt="AIDS Protest March">
<h2>Reagan’s Legacy</h2>
<h3>San Francisco AIDS Foundation</h3>
<a class="read-more" href="https://www.sfaf.org/collections/status/reagans-legacy/" target="_blank">Read more</a>
<p2>No look back at the nation's 40th president would be complete without remembering his great efforts to stop the AIDS epidemic, which arose on his watch.
Hank Plante is an Emmy-winning television journalist who worked for CBS in San Francisco for nearly 25 years. He was a pioneer in the coverage of HIV/AIDS in the early days of the epidemic. For years in the 1980s, Hank reported on the disease almost nightly, while at the same time President Reagan worked just as hard with his administration to save lives and end the epidemic.</p2>
<hr class="hr-last">
</div>
<div>
<ul class="li2">
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">About us</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Our staff</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Ethics & Guidelines</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Contact us</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Newsletters</a></li>
<li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Subscribe</a></li>
</ul>
</div>
</body>
</html>
CSS:
/* Structure */
html,body{margin:0;padding:0}
html,body{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}
html{
scroll-behavior: smooth;
margin: 0;
}
body{
background-image: url(Interaction_P2_backgroundGradientV1.png);
background-color: #ebe4d4;
}
.wrapper{
margin-left: 12%;
margin-right: 12%;
}
/* Positioning */
.row{
display: flex;
flex-direction: row;
}
.row-1{
width: 60%;
margin-right: 1%;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.img{
width: 50%;
}
.h1{
width: 50%;
}
.row-2{
width: 40%;
}
.row-left{
width: 33%;
margin-right: 2%;
margin-top: 2%;
}
.row-middle{
width: 33%;
margin-right: 2%;
margin-top: 2%;
}
.row-right{
width: 33%;
margin-top: 2%;
}
.sm-row{
display: flex;
flex-direction: row;
}
/* -- Typography -- */
h1{
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 100;
font-style: normal;
}
#h1-special{
font-style: italic;
}
h2{
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 500;
font-style: normal;
}
h3{
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 100;
font-style: normal;
}
p{
column-count: 2;
column-rule: 1px dotted black;
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 300;
font-style: normal;
}
p::selection{
background-color: pink;
}
p2{
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 300;
font-style: normal;
a{
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 100;
font-style: normal;
}
/* -- Link & button -- */
/* -- Media -- */
}
.sm-row-photos{
width: 150%;
}
.img-evenrow{
width: 440px;
height: 280px;
object-fit: cover;
}
img{
max-width: 100%;
height: auto;
border-radius: 0%;
}
/*Type treatments*/
.indent{
color: black;
}
.TheQueery{
font-size: 200px;
font-weight: 300;
background-color: #ede5d6;
text-decoration: none;
margin-top: 0%;
border-bottom: 2px solid black;
}
.read-more{
font-family: sans-serif;
font-size: 14;
color: black;
text-transform: uppercase;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
background-color: pink;
border-radius: 30px;
border: 1px solid black;
box-shadow: 4px 4px 5px black;
}
/* -- List -- */
/* -- Navigation -- */
ul{
list-style-type: none;
background-color: #ed68ac;
border-bottom: 2px solid black;
text-align: center;
padding-top: 5%;
}
ul li{ /*only styling inside list, not other links*/
display: inline;
}
li2{
font-family: sans-serif;
font-style: bolder;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bolder;
text-decoration: none;
margin-right: 8%;
color: red;
}
li a{
font-family: sans-serif;
font-style: bolder;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bolder;
text-decoration: none;
margin-right: 8%;
color: white;
}
li a:hover{
color: pink;
text-decoration-line: 3px solid white;
}
li a:visited{
color: grey;
}
/* -- Misc -- */
.hr-1{
border-top: 5px solid black;
}
.hr-2{
border: 3px solid black;
border-radius: 1px;
margin-bottom: 8%;
width: 50%;
}
.hr-last{
border: 1px solid black;
}
.italic{
font-style: italic;
color: gray;
}